CSS布局
傳統(tǒng)方案是基于盒裝模型汽纠，依賴display屬性+position屬性+float屬性嫩絮，但對(duì)于一些特殊布局（eg:垂直居中）就不容易實(shí)現(xiàn)秕衙。
補(bǔ)充：
塊元素：出現(xiàn)在另一個(gè)元素下面的元素矫俺；
內(nèi)聯(lián)元素：出現(xiàn)在另一個(gè)元素旁邊的元素烹棉，就像段落中的單個(gè)單詞一樣阳仔；
dispaly屬性一些默認(rèn)的display的值忧陪，段落之間樣式默認(rèn)值為：display:block；<a>元素默認(rèn)為display:inline近范。
注：display:flex和display:grid在布局上比較重要嘶摊。
1、Flex布局
- 彈性盒子(Flexbox)
用于創(chuàng)建橫向/縱向的一維頁(yè)面布局评矩，在其父元素上應(yīng)用display:flex叶堆，所有直接子元素機(jī)會(huì)按照f(shuō)lex進(jìn)行布局，但是子元素的float,clear,vertical-align屬性將失效斥杜。
任何一個(gè)容器都可指定為flex布局虱颗。
.box {
display: flex;
}
<div class="box">
<div class="box1">one</div>
<div class="box2">two</div>
<div class="box3">three</div>
</div>
.box {
display: flex;
}
.box > div {
flex:1
}
<div class="box">
<div class="box1">one</div>
<div class="box2">two</div>
<div class="box3">three</div>
</div>
.container{
display:flex;
flex-wrap: wrap; /*可換行*/
justify-content:center;
}
.item{
flex: 0 1 150px;
margin: 5px; /*外邊距*/
}
flex：是flex-grow、flex-shrink蔗喂、flex-basis的合并形式忘渔。
2、Grid布局
用于同時(shí)在兩個(gè)維度把元素按行和列排列整齊弱恒。grad-template-rows和grid-template-columns定義了行和列的軌道辨萍。grid-gap定義了網(wǎng)格間的間距。
Grid 布局只對(duì)項(xiàng)目生效，不對(duì)項(xiàng)目子元素起作用锈玉。
如下代碼：
.box {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grad-template-rows: 100px 100px;
grid-gap:10px;
}
<div class="box">
<div class="box1">one</div>
<div class="box2">two</div>
<div class="box3">three</div>
<div class="box1">one</div>
<div class="box2">two</div>
</div>
注：
a.fr單位跨網(wǎng)格軌道可用空間的分布爪飘。上面代碼中有著3個(gè)大小為1fr的軌道的網(wǎng)格容器，創(chuàng)建了三個(gè)列軌道拉背；
b.若最后一個(gè)是2fr师崎，則表示最后一個(gè)軌道是前者的二倍；
c.還可以與絕對(duì)單位結(jié)合使用椅棺，eg:
grid-template-columns: 150px 1fr 2fr;表示第一列寬是150像素犁罩，第三列寬是第二列寬的2倍;
d.grid-template-columns: 150px auto 150px;auto表示由瀏覽器自己決定
- 默認(rèn)情況下，容器元素都是塊級(jí)元素两疚，但也可以設(shè)為行內(nèi)元素床估。如下代碼，就是指定了
div是一個(gè)行內(nèi)元素诱渤，該元素內(nèi)部采用網(wǎng)格布局：
div{display: inline-grid;}
注：設(shè)為網(wǎng)格布局后丐巫，容器子元素（項(xiàng)目）的float、display:inline-block勺美、display:table-cell递胧、vertical-align和column-*等
設(shè)置都將失效。 - 容器指定了網(wǎng)格布局后赡茸，就要?jiǎng)澐中泻土辛恕?br>
列寬：grid-template-columns
行高：grid-template-rows
代碼如下：
.container {
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
}
上面代碼指定了一個(gè)三行三列的網(wǎng)格缎脾，列和寬都是100px,當(dāng)然也可用百分比;
或用repeat(3,100px)也可；
或用repeat(auto-fill,100px)占卧，當(dāng)容器大小不確定時(shí)可以用遗菠。
- 比較常用的布局
兩欄布局：
grid-template-columns: minmax(150px,25%) 1fr;
表示第一列寬度最小為150px，最大寬度為總寬度的25%
三明治布局
grid-template-rows：auto 1fr auto;
垂直劃分為上中下三部分（頁(yè)眉屉栓、內(nèi)容區(qū)舷蒲、頁(yè)腳）耸袜，頁(yè)眉和頁(yè)腳都是本來(lái)的內(nèi)容高度友多，內(nèi)容區(qū)是剩下所有的高度。
圣杯布局（最常用）
是將三明治布局中的內(nèi)容區(qū)分成三部分（左邊欄堤框、主欄域滥、右邊欄）
html代碼
<div class="container">
<header/>
<div>
<main/>
<div/>
<footer/>
</div>
CSS代碼：
.container{
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
表示垂直方向（頁(yè)眉和頁(yè)腳都是本身內(nèi)容高度，內(nèi)容區(qū)占滿剩余的高度）蜈抓，水平方向（左邊欄和右邊欄都是本身內(nèi)容高度启绰，中間主欄占滿剩余的高度）。
十二網(wǎng)格布局
grid-template-columns: repeat(12, 1fr);
一些常用的網(wǎng)格屬性
行間距：
grid-row-gap列間距：
gid-column-gap合并寫法：
grid-gap設(shè)置單元格內(nèi)容的水平位置：
justify-items設(shè)置單元格內(nèi)容的垂直位置：
align-items合并寫法：
place-items整個(gè)內(nèi)容區(qū)域在容器里面的水平位置：
justify-content整個(gè)內(nèi)容區(qū)域在容器里面的垂直位置：
align-content合并寫法：
place-contentgrid-column：1/3等同于grid-column: 1/span 2表示從第一根列線到第三根列線（即第一列和第二列）grid-row：1/span 2沟使，第一根行線委可，橫跨兩個(gè)網(wǎng)格，（即表示第一行和第二行）grid-area：指定項(xiàng)目放在哪個(gè)區(qū)域
