本文首發於知乎專欄:前端指南css
佈局是CSS中一個重要部分,本文總結了CSS佈局中的經常使用技巧,包括經常使用的水平居中、垂直居中方法,以及單列布局、多列布局的多種實現方式(包括傳統的盒模型佈局和比較新的flex佈局實現),但願能給須要的小夥伴帶來一些幫助。html
經常使用居中方法前端
水平居中segmentfault
垂直居中瀏覽器
單列布局ide
二列&三列布局wordpress
float+margin佈局
position+margin學習
聖盃佈局(float+負margin)flex
雙飛翼佈局(float+負margin)
flex佈局
總結
居中在佈局中很常見,咱們假設DOM文檔結構以下,子元素要在父元素中居中:
<div class="parent"> <div class="child"></div> </div>
子元素爲行內元素仍是塊狀元素,寬度必定仍是寬度未定,採起的佈局方案不一樣。下面進行分析:
行內元素:對父元素設置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:fixed(absolute)
,而後設置margin:auto
;
通用方案: flex佈局,給父元素設置{display:flex; align-items:center;}
。
特徵:定寬、水平居中
常見的單列布局有兩種:
一種是header
、content
、footer
寬度都相同,其通常不會佔滿瀏覽器的最寬寬度,但當瀏覽器寬度縮小低於其最大寬度時,寬度會自適應。
一種是header
、footer
寬度爲瀏覽器寬度,但content
以及header
和footer
裏的內容卻不會佔滿瀏覽器寬度。
對於第一種,對header
、content
、footer
統一設置width
或max-width
,並經過margin:auto
實現居中。
DOM文檔:
<div class="layout"> <div id="header">頭部</div> <div id="content">內容</div> <div id="footer">尾部</div> </div>
CSS清單:
.layout{ /* width: 960px; *//*設置width當瀏覽器窗口寬度小於960px時,單列布局不會自適應。*/ max-width: 960px; margin: 0 auto; }
對於第二種,header
、footer
的內容寬度爲100%,但header
、footer
的內容區以及content
統一設置max-width
,並經過margin:auto
實現居中。
DOM文檔:
<div id="header"> <div class="layout">頭部</div> </div> <div id="content" class="layout">內容</div> <div id="footer"> <div class="layout">尾部</div> </div>
CSS清單:
.layout{ /* width: 960px; *//*設置width當瀏覽器窗口寬度小於960px時,單列布局不會自適應。*/ max-width: 960px; margin: 0 auto; }
二列布局的特徵是側欄固定寬度,主欄自適應寬度。
三列布局的特徵是兩側兩列固定寬度,中間列自適應寬度。
之因此將二列布局和三列布局寫在一塊兒,是由於二列布局能夠看作去掉一個側欄的三列布局,其佈局的思想有殊途同歸之妙。對於傳統的實現方法,主要討論上圖中前三種佈局,經典的帶有側欄的二欄佈局以及帶有左右側欄的三欄佈局,對於flex佈局,實現了上圖的五種佈局。
原理說明:設置兩個側欄分別向左向右浮動,中間列經過外邊距給兩個側欄騰出空間,中間列的寬度根據瀏覽器窗口自適應。
DOM文檔:
<div id="content"> <div class="sub">sub</div> <div class="extra">extra</div> <div class="main">main</div> </div>
佈局步驟:
對兩邊側欄分別設置寬度,並對左側欄添加左浮動,對右側欄添加有浮動。
對主面板設置左右外邊距,margin-left的值爲左側欄的寬度,margin-right的值爲右側欄的寬度。
CSS清單:
.sub{ width: 100px; float: left; } .extra{ width: 200px; float: right; } .main{ margin-left: 100px; margin-right: 200px; }
一些說明:
* 注意DOM文檔的書寫順序,先寫兩側欄,再寫主面板,更換後則側欄會被擠到下一列(聖盃佈局和雙飛翼佈局都會用到)。
* 這種佈局方式比較簡單明瞭,但缺點是渲染時先渲染了側邊欄,而不是比較重要的主面板。
二列的實現方法
若是是左邊帶有側欄的二欄佈局,則去掉右側欄,不要設置主面板的margin-right
值,其餘操做相同。反之亦然。
原理說明:經過絕對定位將兩個側欄固定,一樣經過外邊距給兩個側欄騰出空間,中間列自適應。
DOM文檔:
<div class="sub">left</div> <div class="main">main</div> <div class="extra">right</div>
佈局步驟:
對兩邊側欄分別設置寬度,設置定位方式爲絕對定位。
設置兩側欄的top值都爲0,設置左側欄的left值爲0, 右側欄的right值爲0。
對主面板設置左右外邊距,margin-left的值爲左側欄的寬度,margin-right的值爲右側欄的寬度。
CSS清單:
.sub, .extra { position: absolute; top: 0; width: 200px; } .sub { left: 0; } .extra { right: 0; } .main { margin: 0 200px; }
一些說明:
與上一種方法相比,本種方法是經過定位來實現側欄的位置固定。
若是中間欄含有最小寬度限制,或是含有寬度的內部元素,則瀏覽器窗口小到必定程度,主面板與側欄會發生重疊。
二列的實現方法
若是是左邊帶有側欄的二欄佈局,則去掉右側欄,不要設置主面板的margin-right
值,其餘操做相同。反之亦然。
原理說明:
主面板設置寬度爲100%,主面板與兩個側欄都設置浮動,常見爲左浮動,這時兩個側欄會被主面板擠下去。經過負邊距將浮動的側欄拉上來,左側欄的負邊距爲100%,恰好是窗口的寬度,所以會從主面板下面的左邊跑到與主面板對齊的左邊,右側欄此時浮動在主面板下面的左邊,設置負邊距爲負的自身寬度恰好浮動到主面板對齊的右邊。爲了不側欄遮擋主面板內容,在外層設置左右padding值爲左右側欄的寬度,給側欄騰出空間,此時主面板的寬度減少。因爲側欄的負margin都是相對主面板的,兩個側欄並不會像咱們理想中的停靠在左右兩邊,而是跟着縮小的主面板一塊兒向中間靠攏。此時使用相對佈局,調整兩個側欄到相應的位置。
DOM文檔:
<div id="bd"> <div class="main"></div> <div class="sub"></div> <div class="extra"></div> </div>
佈局步驟:
三者都設置向左浮動。
設置main寬度爲100%,設置兩側欄的寬度。
設置 負邊距,sub設置負左邊距爲100%,extra設置負左邊距爲負的自身寬度。
設置main的padding值給左右兩個子面板留出空間。
設置兩個子面板爲相對定位,sub的left值爲負的sub寬度,extra的right值爲負的extra寬度。
CSS清單:
.main { float: left; width: 100%; } .sub { float: left; width: 190px; margin-left: -100%; position: relative; left: -190px; } .extra { float: left; width: 230px; margin-left: -230px; position: relative; right: -230px; } #bd { padding: 0 230px 0 190px; }
一些說明
DOM元素的書寫順序不得更改。
當面板的main
內容部分比兩邊的子面板寬度小的時候,佈局就會亂掉。能夠經過設置main
的min-width
屬性或使用雙飛翼佈局避免問題。
二列的實現方法
若是是左邊帶有側欄的二欄佈局,則去掉右側欄,不要設置主面板的padding-right
值,其餘操做相同。反之亦然。
原理說明:
雙飛翼佈局和聖盃佈局的思想有些類似,都利用了浮動和負邊距,但雙飛翼佈局在聖盃佈局上作了改進,在main
元素上加了一層div, 並設置margin
,因爲兩側欄的負邊距都是相對於main-wrap而言,main的margin值變化便不會影響兩個側欄,所以省掉了對兩側欄設置相對佈局的步驟。
DOM文檔:
<div id="main-wrap" class="column"> <div id="main">#main</div> </div> <div class="sub"></div> <div class="extra"></div>
佈局步驟:
三者都設置向左浮動。
設置main-wrap寬度爲100%,設置兩個側欄的寬度。
設置 負邊距,sub設置負左邊距爲100%,extra設置負左邊距爲負的自身寬度。
設置main的margin值給左右兩個子面板留出空間。
CSS清單:
.main-wrap { float: left; width: 100%; } .sub { float: left; width: 190px; margin-left: -100%; } .extra { float: left; width: 230px; margin-left: -230px; } .main { margin: 0 230px 0 190px; }
一些說明
聖盃採用的是padding,而雙飛翼採用的margin,解決了聖盃佈局main的最小寬度不能小於左側欄的缺點。
雙飛翼佈局不用設置相對佈局,以及對應的left和right值。
經過引入相對佈局,能夠實現三欄佈局的各類組合,例如對右側欄設置position: relative; left: 190px;
,能夠實現sub+extra+main的佈局。
二列的實現方法
若是是左邊帶有側欄的二欄佈局,則去掉右側欄,不要設置main-wrap
的margin-right
值,其餘操做相同。反之亦然。
若是你尚未學習flex佈局,阮一峯老師的兩篇博文將會很適合你。
阮一峯的博客——flex語法
阮一峯的博客——flex佈局案例
如下是五種佈局的flex佈局代碼:
DOM文檔:
<div class="layout"> <aside class="layout__aside">側邊欄寬度固定</aside> <div class="layout__main">主內容欄寬度自適應</div> </div> <div class="layout"> <div class="layout__main">主內容欄寬度自適應</div> <aside class="layout__aside">側邊欄寬度固定</aside> </div> <div class="layout"> <aside class="layout__aside">左側邊欄寬度固定</aside> <div class="layout__main">主內容欄寬度自適應</div> <aside class="layout__aside">右側邊欄寬度固定</aside> </div> <div class="layout"> <aside class="layout__aside">第1個側邊欄寬度固定</aside> <aside class="layout__aside">第2個側邊欄寬度固定</aside> <div class="layout__main">主內容欄寬度自適應</div> </div> <div class="layout"> <div class="layout__main">主內容欄寬度自適應</div> <aside class="layout__aside">第1個側邊欄寬度固定</aside> <aside class="layout__aside">第2個側邊欄寬度固定</aside> </div>
CSS清單
.layout { display: flex; } .layout__main { flex: 1; } .layout__aside { width: 200px; }
與以前所講的幾種傳統佈局方案相比,flex佈局的代碼可謂異常簡潔,並且很是通用,利用簡單的三行CSS即實現了常見的五種佈局。
傳統的佈局方法基於盒狀模型,依賴 display
屬性 + position
屬性 + float
屬性,邏輯相對複雜,對於實現一些特殊效果,例如垂直居中,尤爲複雜繁瑣。而flex佈局中的flex容器能夠根據實際可用空間動態調整子元素的寬高比和順序,使元素可以儘量地利用可用空間,同時也能經過縮小來避免超出。flex佈局提供了一套簡便、完整、響應式的佈局方案。
flex佈局將是CSS佈局的趨勢,還未正式成爲標準的gird佈局也異常吸睛,因而知乎上不少剛入門的小夥伴
有了疑惑 2017年,聖盃和雙飛翼佈局已經淘汰了,真的?,對於此我我的仍然堅持個人觀點2017年,聖盃和雙飛翼佈局已經淘汰了,真的? - Shelley Lee 的回答 - 知乎,至少在目前過渡階段,仍然堅持夯實基礎,穩步向前。
本文完。
PS:之後會繼續寫Flex佈局和Grid佈局相關文章,歡迎持續關注,也歡迎你們對文章提出建議或意見。
參考連接
CSS垂直居中和水平居中
聖盃佈局小結
雙飛翼佈局介紹-始於淘寶UED_慕課猿問
我熟知的三種三欄網頁寬度自適應佈局方法 " 張鑫旭-鑫空間-鑫生活
常見的幾種佈局總結
本文知識產權歸做者及碼蜂社全部,轉載須註明來源。尊重版權是對知識分享最大的支持。