CSS佈局問題

左右/左中右佈局

1. 浮動

給全部子元素添加float:left;,同時給父元素添加clearfix類,解決浮動出現的bug。
CSS:

HTML:

2. 行內塊

使用display: inline-block;使塊元素成爲行內塊，此時會出現bug：下方出現一個空隙，必定要用vertical-align: top;來解決。

3. 絕對定位

爲父元素設置position:relative;，爲子元素設置position:absolute; 。如圖：

特定狀況下使用浮動仍是絕對定位:
1.使用浮動時：不須要計算特別精確的位置，不過不易操控，浮動元素的寬度須要注意，不然會換行展現，適用於導航欄等地方。
2.使用絕對定位：須要計算元素的具體位置，不過更加準確，易於操控。
3.當某些元素的位置要根據父元素的大小自適應，內容寬度沒法肯定時，建議使用浮動。
4.當特定元素的位置是相對父元素固定，或者內容寬高肯定，須要精肯定位甚至之後要用js操做變換位置時，建議使用浮動。

4. Flex佈局

給父級加上 display: flex;定義其爲flex容器，使用flex-direction: row;使主軸水平；

HTML:

CSS:

佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局很是不方便，好比，垂直居中就不容易實現。
2009年，W3C 提出了一種新的方案----Flex 佈局，能夠簡便、完整、響應式地實現各類頁面佈局。目前，它已經獲得了全部瀏覽器的支持，這意味着，如今就能很安全地使用這項功能。Flex 佈局將成爲將來佈局的首選方案。

• 設爲 Flex 佈局之後，子元素的float、clear和vertical-align屬性將失效;
• flex-direction屬性決定主軸的方向（即項目的排列方向）,它可能有4個值;
• row（默認值）：主軸爲水平方向，起點在左端。
• row-reverse：主軸爲水平方向，起點在右端。
• column：主軸爲垂直方向，起點在上沿。
• column-reverse：主軸爲垂直方向，起點在下沿。
• 更多flex語法:阮一峯博客--www.ruanyifeng.com/blog/2015/0…

---

水平居中

1.內聯元素水平居中：

將內聯元素外部的塊級元素的text-align設置爲center,便可實現內聯元素(inline、inline-block)的水平居中。可設置內聯元素的行高line-height控制內聯元素所佔高度。

2. 塊級元素水平居中：

將固定寬度的塊級元素的margin-left和margin-right設置成auto，便可實現元素的水平居中。

3. 多個塊級元素水平居中：

如圖中ol的佈局問題，

block默認會擴展，使用 display: inline-block;使其成爲行內塊，默認收縮。此時會出現bug：下方出現一個空隙，必定要用 vertical-align: top;來解決，結果如圖：

此時這是一個內聯元素，在父級中加入 text-align: center;能夠實現子元素水平居中。
CSS:

4.絕對定位

經過position:absolute;實現CSS水平居中。

5.flex佈局

justify-content屬性定義了項目在主軸上的對齊方式；
使用justify-content:center;實現居中；

CSS:

• justify-content可能取5個值，具體對齊方式與軸的方向有關,下面假設主軸爲從左到右。
• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

---

垂直居中

1.內聯元素垂直居中

設置內聯元素的行高(line-height)和內聯元素的父元素的高度(height)相等，且內聯元素的字體大小遠小於行高，便可使內聯元素垂直居中。

2.塊級元素垂直居中

• 固定高度的塊級元素： 經過絕對定位使元素距離頂部50%，並設置margin-top向上移元素高度的一半，實現垂直居中。
• 經過verticle-align:middle實現CSS垂直居中。(vertical生效的前提是元素的display：inline-block。)

3.flex佈局

使用align-items:center;使子元素相對交叉軸的中點對齊（默認交叉軸從上到下）。

CSS:

• align-items屬性定義項目在交叉軸上如何對齊。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。
• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。