本文概要
本文將介紹如下幾種常見的布局：
單列布局
兩列自適應(yīng)布局
圣飛布局和雙飛翼布局
偽等高布局
粘連布局
一奋蔚、單列布局
常見的單列布局有兩種：
header,content和footer等寬的單列布局
header與footer等寬,content略窄的單列布局
1.如何實現(xiàn)
對于第一種，先通過對header,content,footer統(tǒng)一設(shè)置width：1000px;或者max-width：1000px(這兩者的區(qū)別是當(dāng)屏幕小于1000px時拳话，前者會出現(xiàn)滾動條，后者則不會种吸，顯示出實際寬度);然后設(shè)置margin:auto實現(xiàn)居中即可得到弃衍。
.header{
margin:0auto;
max-width:960px;
height:100px;
background-color:?blue;
}
.content{
margin:0auto;
max-width:960px;
height:400px;
background-color:?aquamarine;
}
.footer{
margin:0auto;
max-width:960px;
height:100px;
background-color:?aqua;
}
對于第二種，header坚俗、footer的內(nèi)容寬度不設(shè)置镜盯，塊級元素充滿整個屏幕岸裙，但header、content和footer的內(nèi)容區(qū)設(shè)置同一個width速缆，并通過margin:auto實現(xiàn)居中哥桥。
.header{
margin:0auto;
max-width:960px;
height:100px;
background-color:?blue;
}
.nav{
margin:0auto;
max-width:800px;
background-color:?darkgray;
height:50px;
}
.content{
margin:0auto;
max-width:800px;
height:400px;
background-color:?aquamarine;
}
.footer{
margin:0auto;
max-width:960px;
height:100px;
background-color:?aqua;
}
二、兩列自適應(yīng)布局
兩列自適應(yīng)布局是指一列由內(nèi)容撐開激涤，另一列撐滿剩余寬度的布局方式
1.float+overflow:hidden
如果是普通的兩列布局，浮動+普通元素的margin便可以實現(xiàn)判呕，但如果是自適應(yīng)的兩列布局倦踢，利用float+overflow:hidden便可以實現(xiàn)，這種辦法主要通過overflow觸發(fā)BFC,而BFC不會重疊浮動元素侠草。由于設(shè)置overflow:hidden并不會觸發(fā)IE6-瀏覽器的haslayout屬性辱挥，所以需要設(shè)置zoom:1來兼容IE6-瀏覽器。具體代碼如下：
left
right
right
.parent{
overflow:?hidden;
zoom:1;
}
.left{
float:?left;
margin-right:20px;
}
.right{
overflow:?hidden;
zoom:1;
}
注意點:如果側(cè)邊欄在右邊時边涕，注意渲染順序晤碘。即在HTML中，先寫側(cè)邊欄后寫主內(nèi)容
2.Flex布局
Flex布局功蜓，也叫彈性盒子布局园爷，區(qū)區(qū)簡單幾行代碼就可以實現(xiàn)各種頁面的的布局。
//html部分同上
.parent{
display:flex;
}
.right?{
margin-left:20px;
flex:1;
}
3.grid布局
Grid布局式撼，是一個基于網(wǎng)格的二維布局系統(tǒng)童社，目的是用來優(yōu)化用戶界面設(shè)計。
//html部分同上
.parent?{
display:grid;
grid-template-columns:auto1fr;
grid-gap:20px
}
三著隆、三欄布局
特征：中間列自適應(yīng)寬度扰楼，旁邊兩側(cè)固定寬度，實現(xiàn)三欄布局有多種方式（可以猛戳實現(xiàn)三欄布局的幾種方法),本文著重介紹圣杯布局和雙飛翼布局美浦。
1.圣杯布局
① 特點
比較特殊的三欄布局弦赖，同樣也是兩邊固定寬度，中間自適應(yīng)浦辨，唯一區(qū)別是dom結(jié)構(gòu)必須是先寫中間列部分蹬竖，這樣實現(xiàn)中間列可以優(yōu)先加載。
.container?{
padding-left:220px;//為左右欄騰出空間
padding-right:220px;
}
.left?{
float:?left;
width:200px;
height:400px;
background:?red;
margin-left:-100%;
position:?relative;
left:-220px;
}
.center?{
float:?left;
width:100%;
height:500px;
background:?yellow;
}
.right?{
float:?left;
width:200px;
height:400px;
background:?blue;
margin-left:-200px;
position:?relative;
right:-220px;
}
圣杯布局
② 實現(xiàn)步驟
三個部分都設(shè)定為左浮動流酬，否則左右兩邊內(nèi)容上不去案腺，就不可能與中間列同一行。然后設(shè)置center的寬度為100%(實現(xiàn)中間列內(nèi)容自適應(yīng))康吵，此時劈榨，left和right部分會跳到下一行
通過設(shè)置margin-left為負(fù)值讓left和right部分回到與center部分同一行
通過設(shè)置父容器的padding-left和padding-right，讓左右兩邊留出間隙晦嵌。
通過設(shè)置相對定位同辣，讓left和right部分移動到兩邊拷姿。
③ 缺點
center部分的最小寬度不能小于left部分的寬度，否則會left部分掉到下一行
如果其中一列內(nèi)容高度拉長(如下圖)旱函，其他兩列的背景并不會自動填充响巢。(借助偽等高布局可解決)
④ 偽等高布局
等高布局是指子元素在父元素中高度相等的布局方式。等高布局的實現(xiàn)包括偽等高和真等高,偽等高只是看上去等高而已,真等高是實實在在的等高棒妨。
此處我們通過偽等布局便可解決圣杯布局的第二點缺點踪古，因為背景是在padding區(qū)域顯示的，設(shè)置一個大數(shù)值的padding-bottom券腔，再設(shè)置相同數(shù)值的負(fù)的margin-bottom伏穆，并在所有列外面加上一個容器，并設(shè)置overflow:hidden把溢出背景切掉纷纫。這種可能實現(xiàn)多列等高布局枕扫，并且也能實現(xiàn)列與列之間分隔線效果，結(jié)構(gòu)簡單辱魁，兼容所有瀏覽器烟瞧。新增代碼如下：
.center,
.left,
.right?{
padding-bottom:10000px;
margin-bottom:-10000px;
}
.container?{
padding-left:220px;
padding-right:220px;
overflow:?hidden;//把溢出背景切掉
}
2.雙飛翼布局
① 特點
同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化染簇，解決了圣杯布局錯亂問題参滴，實現(xiàn)了內(nèi)容與布局的分離。而且任何一欄都可以是最高欄锻弓，不會出問題卵洗。
.container?{
min-width:600px;//確保中間內(nèi)容可以顯示出來，兩倍left寬+right寬
}
.left?{
float:?left;
width:200px;
height:400px;
background:?red;
margin-left:-100%;
}
.center?{
float:?left;
width:100%;
height:500px;
background:?yellow;
}
.center?.inner?{
margin:0200px;//新增部分
}
.right?{
float:?left;
width:200px;
height:400px;
background:?blue;
margin-left:-200px;
}
雙飛翼布局
② 實現(xiàn)步驟(前兩步與圣杯布局一樣)
三個部分都設(shè)定為左浮動弥咪，然后設(shè)置center的寬度為100%过蹂，此時，left和right部分會跳到下一行聚至；
通過設(shè)置margin-left為負(fù)值讓left和right部分回到與center部分同一行酷勺；
center部分增加一個內(nèi)層div，并設(shè)margin: 0 200px扳躬；
③ 缺點
多加一層 dom 樹節(jié)點脆诉，增加渲染樹生成的計算量。
3.兩種布局實現(xiàn)方式對比:
兩種布局方式都是把主列放在文檔流最前面贷币，使主列優(yōu)先加載击胜。
兩種布局方式在實現(xiàn)上也有相同之處，都是讓三列浮動役纹，然后通過負(fù)外邊距形成三列布局偶摔。
兩種布局方式的不同之處在于如何處理中間主列的位置：
圣杯布局是利用父容器的左、右內(nèi)邊距+兩個從列相對定位促脉；
雙飛翼布局是把主列嵌套在一個新的父級塊中利用主列的左辰斋、右外邊距進(jìn)行布局調(diào)整
四策州、粘連布局
1.特點
有一塊內(nèi)容<main>，當(dāng)<main>的高康足夠長的時候宫仗，緊跟在<main>后面的元素<footer>會跟在<main>元素的后面够挂。
當(dāng)<main>元素比較短的時候(比如小于屏幕的高度),我們期望這個<footer>元素能夠“粘連”在屏幕的底部
當(dāng)main足夠長時
當(dāng)main比較短時
具體代碼如下：
main
main
main
footer
*?{
margin:0;
padding:0;
}
html,
body?{
height:100%;//高度一層層繼承下來
}
#wrap?{
min-height:100%;
background:?pink;
text-align:?center;
overflow:?hidden;
}
#wrap?.main?{
padding-bottom:50px;
}
#footer?{
height:50px;
line-height:50px;
background:?deeppink;
text-align:?center;
margin-top:-50px;
}
2.實現(xiàn)步驟
(1)footer必須是一個獨立的結(jié)構(gòu)，與wrap沒有任何嵌套關(guān)系
(2)wrap區(qū)域的高度通過設(shè)置min-height藕夫，變?yōu)橐暱诟叨?/p>
(3)footer要使用margin為負(fù)來確定自己的位置
(4)在main區(qū)域需要設(shè)置 padding-bottom孽糖。這也是為了防止負(fù) margin 導(dǎo)致 footer 覆蓋任何實際內(nèi)容。
如果覺得文章對你有些許幫助毅贮，歡迎在我的GitHub博客點贊和關(guān)注办悟，感激不盡！
