頁面布局基礎資訊簡介

2021-08-02 07:58:38 字數 960 閱讀 6923

前言:在頁面開發中,頁面布局是十分重要的,本篇部落格介紹一些布局的基本知識。

一、布局的實現方法

1、table傳統方法,使用**元素進行布局。

2、float浮動布局,對元素進行浮動,從而完成布局。

3、position定位布局,我很喜歡的一種布局方式,屬性值有static,relative,absolute,fixed

二、布局的分類

1、靜態布局:元素不變的布局。

布局特點:

視窗縮小後內容被遮擋時,拖動滾動條顯示布局

設計方法:

pc:居中布局,所有樣式使用絕對寬度,高度

2、自適應布局:建立多個靜態布局,每個靜態布局對應乙個螢幕解析度範圍

布局特點:

改變螢幕解析度可以切換不同的靜態區域性,在每個靜態布局中,元素不發生變化,相當於靜態布局的乙個系列

設計方法:

使用**查詢功能:@media

3、流體式布局:元素寬度按照解析度寬度進行長度、寬度的調整,但布局不變

缺點:

如果螢幕尺度跨度過大,那麼在相對原始設計而言過小或過大的螢幕上不能正常顯示

4、響應式布局:建立多個流體式布局,分別對應乙個螢幕解析度範圍

特點:

分別為不同的螢幕解析度定義布局,同時,在每個布局中,應用流式布局的理念,即頁面元素寬度隨著視窗調整而自動適配

建立多個元素寬度是相對的的布局。理想的響應式布局是指的對pc/移動各種終端進行響應的

備註:響應式布局的詳細說明請參考

響應式布局總結

網頁布局基礎 簡介

css盒子模型的4個屬性 border 邊框 margin 外邊距 padding 內邊距 content 內容 css布局模型主要有3種 流行模型 浮動模型 層模型。換言之,css中3種定位機制 標準文件流 浮動 絕對定位。一 標準文件流 normal flow,這是預設的網頁布局模式。如何實現網...

網頁布局基礎 簡介

css盒子模型的4個屬性 border 邊框 margin 外邊距 padding 內邊距 content 內容 css布局模型主要有3種 流行模型 浮動模型 層模型。換言之,css中3種定位機制 標準文件流 浮動 絕對定位。一 標準文件流 normal flow,這是預設的網頁布局模式。如何實現網...

CSS頁面布局基礎

5 css頁面布局基礎 字符集不能設定寬度,如果要設定寬度必須display設定成塊級 inline 字符集 block 塊級 padding內邊距,border邊框,margin外邊距。4個 上 右 下 左,3個 上 左右 下,兩個 上下 左右,乙個 上下左右。元素浮動 float none 沒有...