css常見布局方式

布局是css中乙個重要部分，下面總結了css布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的盒模型布局和比較新的flex布局實現）。

一、居中方式

水平居中

水平居中對於子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，採取的布局方案是不同。

行內元素：對父元素設定text-align:center;

定寬塊狀元素: 設定左右margin值為auto;

不定寬塊狀元素: 設定子元素為display:inline,然後在父元素上設定text-align:center;

通用方案: flex布局，對父元素設定display:flex;justify-content:center;

垂直居中

垂直居中對於子元素是單行內聯文字、多行內聯文字以及塊狀元素採用的方案也是不同的。

父元素一定，子元素為單行內聯文字：設定父元素的height等於行高line-height

父元素一定，子元素為多行內聯文字：設定父元素的display:table-cell或inline-block，再設定vertical-align:middle;

塊狀元素:設定子元素position:absolute並設定top、bottom為0，父元素要設定定位為static以外的值，margin:auto;

通用方案: flex布局，給父元素設定。

二、單列布局

特徵：定寬、水平居中

常見的單列布局有兩種：

· 一種是header、content、footer寬度都相同，其一般不會佔滿瀏覽器的最寬寬度，但當瀏覽器寬度縮小低於其最大寬度時，寬度會自適應。

· 一種是header、footer寬度為瀏覽器寬度，但content以及header和footer裡的內容卻不會佔滿瀏覽器寬度。

對於第一種，對header、content、footer統一設定width或max-width，並通過margin:auto實現居中。

三、實現多列布局的幾種方式

實現多列布局的方式有：

使用bfc隱藏屬性

float margin

absolute margin

聖杯布局

雙飛翼布局

flex布局

下面所舉例子（以三欄布局為例）的dom文件內容如下：


<
aside 
class
="aside1"
>
aside
>
<
aside 
class
="aside2"
>
aside
>
<
article 
class
="main"
>
article
>

1、使用bfc隱藏屬性

在對需要自適應的元素bfc化，可以實現兩列或三列布局

三列布局方式示例如下：

/* 固定寬度 */.aside1 /*固定寬度 */.aside2 /*bfc化自適應寬度 */.main

使用bfc實現三欄布局時需要注意的是dom的書寫順序問題。如果將aside2與article交換位置，那麼aside2元素會被擠到article元素之下，無法實現三欄自適應布局。缺點：寬度小於aside寬度時，由於寬度不足的原因，三欄布局時會使元素出現掉下去的現象。

2、float margin

在自適應寬度的元素上設定margin值，margin的值大於或等於固定寬度的值即可。實現思路與使用bfc隱藏屬性差不多。缺點：寬度小於aside寬度時，由於寬度不足的原因，三欄布局時會使元素出現掉下去的現象。

css樣式：

.aside1 .main .aside2

3、

absolute margin

使用position: absolute時，dom元素順序並不重要。給左右兩欄定寬，主內容自適應寬度。缺點：側邊欄元素脫離文件流。優點：article元素可先載入。

css樣式：

.aside1 .aside2 .main

4、

聖杯布局

聖杯布局叫float 負margin relative更容易理解一些，它的實現思路如下：

兩欄和自適應元素都設定同一方向的浮動(如float: left)

父元素設定左右padding為左右邊欄的寬度。

自適應元素設定寬度為100%

左邊欄margin-left為負100%，再設定relative，最後通過left屬性偏移負的自身寬度。

右邊欄margin-left為負自身寬度，再設定relative，最後通過right屬性偏移負的自身寬度。

而且，該布局方式與其他布局方式有乙個明顯的不同：它需要有乙個父元素。缺點：寬度小於兩欄寬度時，元素會因為寬度不足而掉下去。

5、雙飛翼布局

雙飛翼布局與聖杯布局相似。只不過少了relative與left, right的步驟和共同父元素，主內容元素多了層父元素。實現思路如下：

兩欄和自適應元素都設定同一方向的浮動(如float: left)

main元素設定左右margin值，值為左右兩欄的寬度。main父元素設定寬度為100%

左邊欄margin-left為負100%

右邊欄margin-left為負自身寬度

6、flex布局

flex布局還可以稱之為彈性布局，它可以簡便、完整、響應式地實現各種頁面布局。而且已經得到所有主流瀏覽器的支援，我們可以放心大膽的使用。

彈性布局的使用方式如下：

① 給父容器新增display: flex/inline-flex;屬性，即可使容器內容採用彈性布局顯示，而不遵循常規文件流的顯示方式；

② 容器新增彈性布局後，僅僅是容器內容採用彈性布局，而容器自身在文件流中的定位方式依然遵循常規文件流；

③ display:flex; 容器新增彈性布局後，顯示為塊級元素；

display:inline-flex; 容器新增彈性布局後，顯示為行級元素；

④ 設為 flex布局後，子元素的float、clear和vertical-align屬性將失效。但是position屬性，依然生效。

雖然在需要縮放，對齊和重新排序元素的情況下使用flex布局非常方便，但以下情況應該盡量避免使用 flex 布局：

1、整體頁面布局

2、完全支援舊瀏覽器的**

更多專業前端知識，請上

【猿2048】www.mk2048.com

css常見布局方式

CSS常見布局方式

css的常見6種布局方式

CSS常見布局

css常見布局方式

CSS常見布局方式

css的常見6種布局方式

CSS常見布局

相關推薦