左右/左中右布局
1. 浮動
給所有子元素添加float:left;,同時給父元素添加clearfix類,解決浮動出現(xiàn)的bug。
CSS:
HTML:
2. 行內(nèi)塊
使用display: inline-block;使塊元素成為行內(nèi)塊姻采，此時會出現(xiàn)bug：下方出現(xiàn)一個空隙泉懦，一定要用vertical-align: top;來解決。
3. 絕對定位
為父元素設(shè)置position:relative;餐济，為子元素設(shè)置position:absolute; 鹏往。如圖：
特定情況下使用浮動還是絕對定位:
1.使用浮動時：不需要計算特別精確的位置冷蚂，不過不易操控议双，浮動元素的寬度需要注意痘番，否則會換行展示，適用于導(dǎo)航欄等地方平痰。
2.使用絕對定位：需要計算元素的具體位置汞舱，不過更加準確，易于操控宗雇。
3.當某些元素的位置要根據(jù)父元素的大小自適應(yīng)昂芜，內(nèi)容寬度無法確定時，建議使用浮動赔蒲。
4.當特定元素的位置是相對父元素固定说铃，或者內(nèi)容寬高確定，需要精確定位甚至以后要用js操作變換位置時嘹履，建議使用浮動。
4. Flex布局
給父級加上 display: flex;定義其為flex容器债热，使用flex-direction: row;使主軸水平砾嫉；
HTML:
CSS:
布局的傳統(tǒng)解決方案，基于盒狀模型窒篱，依賴 display 屬性 + position屬性 + float屬性焕刮。它對于那些特殊布局非常不方便舶沿，比如，垂直居中就不容易實現(xiàn)配并。
2009年括荡，W3C 提出了一種新的方案----Flex 布局，可以簡便溉旋、完整畸冲、響應(yīng)式地實現(xiàn)各種頁面布局。目前观腊，它已經(jīng)得到了所有瀏覽器的支持邑闲，這意味著，現(xiàn)在就能很安全地使用這項功能梧油。Flex 布局將成為未來布局的首選方案苫耸。
- 設(shè)為 Flex 布局以后，子元素的float儡陨、clear和vertical-align屬性將失效;
- flex-direction屬性決定主軸的方向（即項目的排列方向）,它可能有4個值;
- row（默認值）：主軸為水平方向褪子，起點在左端。
- row-reverse：主軸為水平方向骗村，起點在右端嫌褪。
- column：主軸為垂直方向，起點在上沿叙身。
- column-reverse：主軸為垂直方向渔扎，起點在下沿。
- 更多flex語法:阮一峰博客--http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
水平居中
1.內(nèi)聯(lián)元素水平居中：
將內(nèi)聯(lián)元素外部的塊級元素的text-align設(shè)置為center,即可實現(xiàn)內(nèi)聯(lián)元素(inline信轿、inline-block)的水平居中晃痴。可設(shè)置內(nèi)聯(lián)元素的行高line-height控制內(nèi)聯(lián)元素所占高度财忽。
2. 塊級元素水平居中：
將固定寬度的塊級元素的margin-left和margin-right設(shè)置成auto倘核，即可實現(xiàn)元素的水平居中。
3. 多個塊級元素水平居中：
如圖中ol的布局問題即彪，
display: inline-block;使其成為行內(nèi)塊，默認收縮隶校。此時會出現(xiàn)bug：下方出現(xiàn)一個空隙漏益，一定要用vertical-align: top;來解決，結(jié)果如圖：此時這是一個內(nèi)聯(lián)元素深胳，在父級中加入
text-align: center;可以實現(xiàn)子元素水平居中绰疤。CSS:
4.絕對定位
通過position:absolute;實現(xiàn)CSS水平居中。
5.flex布局
justify-content屬性定義了項目在主軸上的對齊方式舞终；
使用justify-content:center;實現(xiàn)居中轻庆；
CSS:
justify-content可能取5個值癣猾，具體對齊方式與軸的方向有關(guān),下面假設(shè)主軸為從左到右。- flex-start（默認值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊余爆，項目之間的間隔都相等纷宇。
- space-around：每個項目兩側(cè)的間隔相等。所以蛾方，項目之間的間隔比項目與邊框的間隔大一倍沥邻。
垂直居中
1.內(nèi)聯(lián)元素垂直居中
設(shè)置內(nèi)聯(lián)元素的行高(line-height)和內(nèi)聯(lián)元素的父元素的高度(height)相等哀军，且內(nèi)聯(lián)元素的字體大小遠小于行高腻菇，即可使內(nèi)聯(lián)元素垂直居中耗式。
2.塊級元素垂直居中
- 固定高度的塊級元素：
通過絕對定位使元素距離頂部50%，并設(shè)置margin-top向上移元素高度的一半五芝，實現(xiàn)垂直居中痘儡。 - 通過verticle-align:middle實現(xiàn)CSS垂直居中。(vertical生效的前提是元素的
display：inline-block枢步。)
3.flex布局
使用align-items:center;使子元素相對交叉軸的中點對齊（默認交叉軸從上到下）沉删。
CSS:
- align-items屬性定義項目在交叉軸上如何對齊。具體的對齊方式與交叉軸的方向有關(guān)醉途，下面假設(shè)交叉軸從上到下矾瑰。
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊隘擎。
- center：交叉軸的中點對齊殴穴。
- baseline: 項目的第一行文字的基線對齊。
- stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto货葬，將占滿整個容器的高度采幌。
