CSS布局

布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的盒模型布局和比較新的flex布局實(shí)現(xiàn)），希望能給需要的小伙伴帶來(lái)一些幫助。

目錄

1.常用居中方法：水平居中，垂直居中，

2.單列布局

3.二列 三列布局：float+margin，position+margin，圣杯布局（float+負(fù)margin），雙飛翼布局（float+負(fù)margin），flex布局

如果你想學(xué)習(xí)交流html5css3等web前端技術(shù)，想多了解一些前端方面的內(nèi)容，可以加入我們的QQ學(xué)習(xí)群：27062964，一起學(xué)習(xí)交流，提升自己，有學(xué)習(xí)資料和源碼分享。或者點(diǎn)擊鏈接直接加入QQ群：

總結(jié)

1.常用居中方法

居中在布局中很常見(jiàn)，我們假設(shè)DOM文檔結(jié)構(gòu)如下，子元素要在父元素中居中：

水平居中

子元素為行內(nèi)元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。下面進(jìn)行分析：

行內(nèi)元素：對(duì)父元素設(shè)置text-align:center;

定寬塊狀元素: 設(shè)置左右margin值為auto;

不定寬塊狀元素: 設(shè)置子元素為display:inline,然后在父元素上設(shè)置text-align:center;

通用方案: flex布局，對(duì)父元素設(shè)置display:flex;justify-content:center;

垂直居中

垂直居中對(duì)于子元素是單行內(nèi)聯(lián)文本、多行內(nèi)聯(lián)文本以及塊狀元素采用的方案是不同的。

父元素一定，子元素為單行內(nèi)聯(lián)文本：設(shè)置父元素的height等于行高line-height

父元素一定，子元素為多行內(nèi)聯(lián)文本：設(shè)置父元素的display:table-cell或inline-block，再設(shè)置vertical-align:middle;

塊狀元素:設(shè)置子元素position:fixed（absolute），然后設(shè)置margin:auto;

通用方案: flex布局，給父元素設(shè)置{display:flex; align-items:center;}。

2.單列布局

特征：定寬、水平居中

常見(jiàn)的單列布局有兩種：

一種是header、content、footer寬度都相同，其一般不會(huì)占滿瀏覽器的最寬寬度，但當(dāng)瀏覽器寬度縮小低于其最大寬度時(shí)，寬度會(huì)自適應(yīng)。

一種是header、footer寬度為瀏覽器寬度，但content以及header和footer里的內(nèi)容卻不會(huì)占滿瀏覽器寬度。

對(duì)于第一種，對(duì)header、content、footer統(tǒng)一設(shè)置width或max-width，并通過(guò)margin:auto實(shí)現(xiàn)居中。

DOM文檔:

CSS清單:

對(duì)于第二種，header、footer的內(nèi)容寬度為100%，但header、footer的內(nèi)容區(qū)以及content統(tǒng)一設(shè)置max-width，并通過(guò)margin:auto實(shí)現(xiàn)居中。

DOM文檔:

CSS清單:

3. 二列 三列布局

二列布局的特征是側(cè)欄固定寬度，主欄自適應(yīng)寬度。三列布局的特征是兩側(cè)兩列固定寬度，中間列自適應(yīng)寬度。

之所以將二列布局和三列布局寫(xiě)在一起，是因?yàn)槎胁季挚梢钥醋鋈サ粢粋€(gè)側(cè)欄的三列布局，其布局的思想有異曲同工之妙。對(duì)于傳統(tǒng)的實(shí)現(xiàn)方法，主要討論上圖中前三種布局，經(jīng)典的帶有側(cè)欄的二欄布局以及帶有左右側(cè)欄的三欄布局，對(duì)于flex布局，實(shí)現(xiàn)了上圖的五種布局。

a. float+margin

原理說(shuō)明：設(shè)置兩個(gè)側(cè)欄分別向左向右浮動(dòng)，中間列通過(guò)外邊距給兩個(gè)側(cè)欄騰出空間，中間列的寬度根據(jù)瀏覽器窗口自適應(yīng)。

DOM文檔:

布局步驟:

對(duì)兩邊側(cè)欄分別設(shè)置寬度，并對(duì)左側(cè)欄添加左浮動(dòng)，對(duì)右側(cè)欄添加有浮動(dòng)。

對(duì)主面板設(shè)置左右外邊距，margin-left的值為左側(cè)欄的寬度，margin-right的值為右側(cè)欄的寬度。

CSS清單:

一些說(shuō)明:

* 注意DOM文檔的書(shū)寫(xiě)順序，先寫(xiě)兩側(cè)欄，再寫(xiě)主面板，更換后則側(cè)欄會(huì)被擠到下一列（圣杯布局和雙飛翼布局都會(huì)用到）。* 這種布局方式比較簡(jiǎn)單明了，但缺點(diǎn)是渲染時(shí)先渲染了側(cè)邊欄，而不是比較重要的主面板。

二列的實(shí)現(xiàn)方法

如果是左邊帶有側(cè)欄的二欄布局，則去掉右側(cè)欄，不要設(shè)置主面板的margin-right值，其他操作相同。反之亦然。

b. position+margin

原理說(shuō)明：通過(guò)絕對(duì)定位將兩個(gè)側(cè)欄固定，同樣通過(guò)外邊距給兩個(gè)側(cè)欄騰出空間，中間列自適應(yīng)。

DOM文檔:

布局步驟:

對(duì)兩邊側(cè)欄分別設(shè)置寬度，設(shè)置定位方式為絕對(duì)定位。

設(shè)置兩側(cè)欄的top值都為0，設(shè)置左側(cè)欄的left值為0， 右側(cè)欄的right值為0。

對(duì)主面板設(shè)置左右外邊距，margin-left的值為左側(cè)欄的寬度，margin-right的值為右側(cè)欄的寬度。

CSS清單:

一些說(shuō)明:

與上一種方法相比，本種方法是通過(guò)定位來(lái)實(shí)現(xiàn)側(cè)欄的位置固定。

如果中間欄含有最小寬度限制，或是含有寬度的內(nèi)部元素，則瀏覽器窗口小到一定程度，主面板與側(cè)欄會(huì)發(fā)生重疊。

二列的實(shí)現(xiàn)方法

如果是左邊帶有側(cè)欄的二欄布局，則去掉右側(cè)欄，不要設(shè)置主面板的margin-right值，其他操作相同。反之亦然。

c. 圣杯布局(float + 負(fù)margin + padding + position)

原理說(shuō)明：

主面板設(shè)置寬度為100%，主面板與兩個(gè)側(cè)欄都設(shè)置浮動(dòng)，常見(jiàn)為左浮動(dòng)，這時(shí)兩個(gè)側(cè)欄會(huì)被主面板擠下去。通過(guò)負(fù)邊距將浮動(dòng)的側(cè)欄拉上來(lái)，左側(cè)欄的負(fù)邊距為100%，剛好是窗口的寬度，因此會(huì)從主面板下面的左邊跑到與主面板對(duì)齊的左邊，右側(cè)欄此時(shí)浮動(dòng)在主面板下面的左邊，設(shè)置負(fù)邊距為負(fù)的自身寬度剛好浮動(dòng)到主面板對(duì)齊的右邊。為了避免側(cè)欄遮擋主面板內(nèi)容，在外層設(shè)置左右padding值為左右側(cè)欄的寬度，給側(cè)欄騰出空間，此時(shí)主面板的寬度減小。由于側(cè)欄的負(fù)margin都是相對(duì)主面板的，兩個(gè)側(cè)欄并不會(huì)像我們理想中的停靠在左右兩邊，而是跟著縮小的主面板一起向中間靠攏。此時(shí)使用相對(duì)布局，調(diào)整兩個(gè)側(cè)欄到相應(yīng)的位置。

DOM文檔:

布局步驟:

三者都設(shè)置向左浮動(dòng)。

設(shè)置main寬度為100%，設(shè)置兩側(cè)欄的寬度。

設(shè)置 負(fù)邊距，sub設(shè)置負(fù)左邊距為100%，extra設(shè)置負(fù)左邊距為負(fù)的自身寬度。

設(shè)置main的padding值給左右兩個(gè)子面板留出空間。

設(shè)置兩個(gè)子面板為相對(duì)定位，sub的left值為負(fù)的sub寬度，extra的right值為負(fù)的extra寬度。

CSS清單:

一些說(shuō)明

DOM元素的書(shū)寫(xiě)順序不得更改。

當(dāng)面板的main內(nèi)容部分比兩邊的子面板寬度小的時(shí)候，布局就會(huì)亂掉。可以通過(guò)設(shè)置main的min-width屬性或使用雙飛翼布局避免問(wèn)題。

二列的實(shí)現(xiàn)方法

如果是左邊帶有側(cè)欄的二欄布局，則去掉右側(cè)欄，不要設(shè)置主面板的padding-right值，其他操作相同。反之亦然。

d. 雙飛翼布局(float + 負(fù)margin + margin)

原理說(shuō)明：

雙飛翼布局和圣杯布局的思想有些相似，都利用了浮動(dòng)和負(fù)邊距，但雙飛翼布局在圣杯布局上做了改進(jìn)，在main元素上加了一層div, 并設(shè)置margin,由于兩側(cè)欄的負(fù)邊距都是相對(duì)于main-wrap而言，main的margin值變化便不會(huì)影響兩個(gè)側(cè)欄，因此省掉了對(duì)兩側(cè)欄設(shè)置相對(duì)布局的步驟。

DOM文檔:

布局步驟:

三者都設(shè)置向左浮動(dòng)。

設(shè)置main-wrap寬度為100%，設(shè)置兩個(gè)側(cè)欄的寬度。

設(shè)置 負(fù)邊距，sub設(shè)置負(fù)左邊距為100%，extra設(shè)置負(fù)左邊距為負(fù)的自身寬度。

設(shè)置main的margin值給左右兩個(gè)子面板留出空間。

CSS清單:

一些說(shuō)明

圣杯采用的是padding，而雙飛翼采用的margin，解決了圣杯布局main的最小寬度不能小于左側(cè)欄的缺點(diǎn)。

雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的left和right值。

通過(guò)引入相對(duì)布局，可以實(shí)現(xiàn)三欄布局的各種組合，例如對(duì)右側(cè)欄設(shè)置position: relative; left: 190px;,可以實(shí)現(xiàn)sub+extra+main的布局。

二列的實(shí)現(xiàn)方法

如果是左邊帶有側(cè)欄的二欄布局，則去掉右側(cè)欄，不要設(shè)置main-wrap的margin-right值，其他操作相同。反之亦然。

以下是五種布局的flex布局代碼：

DOM文檔：

CSS清單

與之前所講的幾種傳統(tǒng)布局方案相比，flex布局的代碼可謂異常簡(jiǎn)潔，而且非常通用，利用簡(jiǎn)單的三行CSS即實(shí)現(xiàn)了常見(jiàn)的五種布局。

總結(jié)

傳統(tǒng)的布局方法基于盒狀模型，依賴display屬性 +position屬性 +float屬性，邏輯相對(duì)復(fù)雜，對(duì)于實(shí)現(xiàn)一些特殊效果，例如垂直居中，尤其復(fù)雜繁瑣。而flex布局中的flex容器可以根據(jù)實(shí)際可用空間動(dòng)態(tài)調(diào)整子元素的寬高比和順序，使元素能夠盡可能地利用可用空間，同時(shí)也能通過(guò)縮小來(lái)避免超出。flex布局提供了一套簡(jiǎn)便、完整、響應(yīng)式的布局方案。

以上就是web前端教程之CSS 布局實(shí)例的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。