HTML與CSS布局技巧總結

2021-07-27 12:10:26 字數 4085 閱讀 2250

單列布局

class="parent">

class="child">div>

div>

水平居中

水平居中的布局方式是最常見的一種，常常用於頭部、內容區、頁尾，它主要的作用是控制盒子在整個頁面以水平居中的方式呈現。

使用margin：0 auto來實現

.child
優勢：相容性好

劣勢：需要指定盒子 寬度

1.使用table來實現

.child
優勢：不需要父容器parent，只需要對自身進行設定

劣勢：ie6、7需要調整結構

2.使用inline-block和text-align來實現

.parent


.child
優勢：相容性好

劣勢：需要同時設定子元素和父元素

3.使用絕對定位absolute來實現

使用絕對定位來實現水平居中布局有兩種情況，一種子容器無寬度，另一種子容器有寬度。無寬度可以用一下**，如果是有寬度，則可以設定margin-left負值為容器寬度的一半。

.parent


.child
優勢：無需設定容器寬度，在移動端可以使用

劣勢：相容性差，需要ie9及以上瀏覽器的支援

4.使用flex布局來實現

flex有兩種方法來實現水平居中，父容器設定display：flex， 一種直接在父容器中設定justify-content屬性值center。第二種在子容器中使用margin： 0 auto

.parent


.parent


.child
優勢：實現起來簡單，尤其是使用在響應式布局中

劣勢：相容性差，如果大面積的使用該布局可能會影響效率

垂直居中

這邊說的垂直居中是子容器無高的垂直居中，並非單行文字垂直居中line-height

1.使用絕對定位absolute來實現（同水平居中的使用方法，優劣一樣）

.parent


.child
2.使用flex來實現

.parent
3.使用display：table-cell來實現

.parent
總結：將水平居中和垂直居中兩種布局方法相互的結合起來就可以實現水平居中布局。這邊只舉乙個用絕對定位來實現水平垂直居中布局的方法，別的方法大家可以嘗試自己練習。（以下介紹各種布局時都是基於上面水平和垂直居中的方法，所有對於它們的優劣就不再分析。）

.parent


.child
多列布局

多列布局也是非常常見的，適用於一側定寬，另一側自適應的布局。

浮動布局

前段時間我總結過關於兩列浮動布局方法，這裡我就不再從新總結了，如果有興趣的朋友可以參考前端時間關於浮動布局的方法（總結）這篇部落格。

多列等分布局

多列等分布局常常出現在內容中，多數為同功能、同階級內容的併排顯示。 

1.使用flex來實現多列布局

.parent


.column


.column+ .column
2.使用table來實現多列布局

.parent


.column
3.使用float來實現多列布局

.column
提示：使用table和float實現多列布局的時候需要注意，如果要設定背景顏色則必須將.column盒子作為父容器在其裡面新增乙個子容器，在設定背景顏色，如果直接在.column容器中設定背景顏色會由於padding而無法產生盒子之間的間距。

九宮格布局

1.使用flex來實現九宮格布局

.parent


.row


.item
2.使用table來實現九宮格布局

.parent


.row


.item
全屏布局

使用絕對定位實現全屏布局

html,body,.parent


.top


.left


.right


.bottom
響應式布局

meta標籤的使用

name="viewport"


content="width=device-width, initial-scale=1"/>
使用**查詢

@media screen and (max


-width: 480px)
總結：這些布局方法有些經常用到，有些由於相容性的問題在具體專案相中使用的情況相對較少，不過對於移動端來說，以上總結的布局都是實用。今天特意花些時間來整理這些布局，一是為了鞏固知識，二是希望這些方法能夠分享給前端的初學者，讓他們對布局有更深入的了解，當然這些並非是css中的所有布局方法，以後發現有什麼布局沒有總結到的，我會繼續更新、分享，如果哪位同行對布局方法有所補充，或者發現部落格中存在問題，歡迎相互交流。

HTML與CSS布局技巧總結

單列布局 class parent class child div div 水平居中 水平居中的布局方式是最常見的一種，常常用於頭部 內容區 頁尾，它主要的作用是控制盒子在整個頁面以水平居中的方式呈現。使用margin 0 auto來實現 child 優勢 相容性好劣勢 需要指定盒子 寬度1.使用t...

CSS布局技巧

兩欄布局 左邊寬度固定，浮動。右邊設定margin left，寬度自適應。反之，亦可。例子 左邊 右邊 三欄布局 兩側浮動且寬度固定，左邊left浮動，右邊right浮動，中間設定margin left和margin right寬度自適應。注意，書寫順序是左右中。例子 左邊 右邊 中間 水平居中 方...

CSS布局總結

css布局模型有三種，分別為流動模型 flow 浮動模型和層模型。流動模型 為預設模型，當未設定其他模型時使用。塊狀元素在包含其的父元素內部，從上到下順序排列，每個一行 設定寬度時按設定的寬度顯示 內聯元素和內聯塊狀元素都會在包含其的元素內從左到右水平順序顯示。無法通過設定left right to...