布局的傳統(tǒng)解決方案，基于盒狀模型垛叨，依賴(lài) display 屬性 + position屬性 + float屬性。它對(duì)于那些特殊布局非常不方便柜某，比如嗽元，垂直居中就不容易實(shí)現(xiàn)。
/* div使用絕對(duì)布局喂击，設(shè)置margin:auto;并設(shè)置top剂癌、left、right翰绊、bottom的值相等即可佩谷，不一定要都是0。 */
.example-1{
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 仍然是絕對(duì)布局监嗜，讓left和top都是50%谐檀，這在水平方向上讓div的最左與屏幕的最左相距50%，垂直方向上一樣裁奇，所以再用transform向左（上）平移它自己寬度（高度）的50%桐猬，也就達(dá)到居中效果了，效果圖和上方相同框喳。 */
.example-2 {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
如果用flex實(shí)現(xiàn)课幕，是這樣的。
/*通過(guò)flex的主軸縱軸上子元素的對(duì)齊方式align-items五垮、justify-content屬性實(shí)現(xiàn)*/
.example-3 {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/**/
.example-4 {
display: flex;
width: 100%;
}
.example-4 .main{
margin: auto;
}
display
| 值 |描述|
|---|---|---|---|---|
|none|此元素不會(huì)被顯示乍惊。|
|block |此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符放仗。|
|inline |默認(rèn)润绎。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。|
|inline-block |行內(nèi)塊元素莉撇。（CSS2.1 新增的值）|
|list-item| 此元素會(huì)作為列表顯示呢蛤。|
|run-in |此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。|
|table| 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類(lèi)似 <table>）棍郎，表格前后帶有換行符其障。|
|inline-table|此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類(lèi)似 <table>），表格前后沒(méi)有換行符涂佃。|
|inherit|規(guī)定應(yīng)該從父元素繼承 display 屬性的值励翼。|
由display的屬性引出各種布局
頁(yè)面布局的幾種方式
定位布局（position）
??定位布局分為兩種：絕對(duì)定位（absolute）和相對(duì)定位（relative），但是位置是寫(xiě)死的辜荠，很不靈活汽抚，一般只用在頁(yè)面中一些需要固定的小標(biāo)簽上。浮動(dòng)布局（float）
??相對(duì)于普通文檔流布局伯病，浮動(dòng)布局會(huì)脫離普通文檔流造烁，起初是為了解決圖文信息中圖片與文字沖突的問(wèn)題，應(yīng)用float后午笛，就可以輕松實(shí)現(xiàn)文字環(huán)繞圖像的效果惭蟋。
??float會(huì)帶來(lái)一個(gè)問(wèn)題，當(dāng)父元素沒(méi)有設(shè)定高度時(shí)季研，子元素浮動(dòng)敞葛，父元素的高度坍塌為0，解決方法參考：
??關(guān)于浮動(dòng)元素float使其父元素高度塌陷的原因及解決方法彈性布局（flex）
??彈性布局flex（Flexible Box）与涡，十分靈活，避免了傳統(tǒng)css代碼繁復(fù)的問(wèn)題持偏，可以快速實(shí)現(xiàn)垂直居中等效果驼卖。flex布局比較適合一維的，所以在頁(yè)面中適合用來(lái)做局部的布局鸿秆，如導(dǎo)航酌畜、菜單等。教程可參考：
??Flex 布局教程：語(yǔ)法篇
??Flex 布局教程：實(shí)例篇網(wǎng)格布局（grid）
??grid是比較新的技術(shù)卿叽，相對(duì)于flex桥胞，grid可以實(shí)現(xiàn)二維布局，從下圖可以看出考婴，目前瀏覽器的支持性還不是太好贩虾，但是在未來(lái)一定會(huì)成為一個(gè)主要的布局方式。
參考教程：
??Grid布局指南：http://www.reibang.com/p/d183265a8dad
- Table布局
??Table布局是比較早期的技術(shù)沥阱，現(xiàn)在基本已經(jīng)不用缎罢，想了解的可以參考一下教程：
??css table布局大法，解決你大部分居中、多列等高策精、左右布局的問(wèn)題
總結(jié)
??如果是面向客戶(hù)舰始，考慮到瀏覽器的兼容問(wèn)題，還是用傳統(tǒng)的display+position+float方式做整體布局咽袜，用flex做局部（導(dǎo)航丸卷、菜單等）的布局。如果是自己實(shí)踐询刹，不面向大眾群體的話(huà)及老，可以多嘗試flex+grid的方法。
適用方式范抓、兼容性
CSS布局的發(fā)展歷程：
參考資料：
Flex布局原理介紹：http://www.reibang.com/p/c25a41f88705
彈性布局flex的那些坑骄恶，你踩過(guò)多少？：https://baijiahao.baidu.com/s?id=1606138910037135099&wfr=spider&for=pc
幾張 GIF 動(dòng)圖讓你看懂彈性盒模型（Flexbox）如何工作：https://yq.aliyun.com/articles/226495
