詳解CSS布局

css頁面布局允許我們拾取網頁中的元素，並且控制它們相對正常布局流、周邊元素、父容器或者主視口/視窗的位置。主要對文件流的改變進行布局。假設你已經掌握了css的選擇器、屬性和值，並且可能對布局有一定了解可以往下看，如果沒有可以先看這篇部落格css解析。

css實現左右布局的方式大概有六種：

1. table的li實現

table標籤是能夠具有實現左右布局的屬性,tr表示一行，td表示一列，tr中可以新增td實現盒子的左右布局.

2 . inline-block

display:inline-block屬性是介於行級元素(display:inline)和塊級元素(display：block)之間的屬性，它可以像行級元素一樣水平布局，也可以像塊級元素設定寬高屬性，所以可以進行左右布局。

3. float實現左右布局

float浮動，將該塊狀區域脫離父級標籤的文件流，left屬性值使該區域向父級標籤區域的左側邊界放置，right屬性值使該區域塊向父級標籤的右側邊界放置，如是利用該屬性可以實現左右布局。

float布局對於後面節點的布局採用交錯性的布局，inline-block採用正常式的布局。

4. flexbox屬性實現左右布局

flexbox彈性盒子布局，display:box;該種布局主要用於移動前端開發。

5. float+margin實現左右布局

float能夠使得元素向左或者向右靠邊布局，如果在同級元素中設定乙個正常流的區域與浮動塊並列，則浮動塊會在該正常流同級區域的邊界處，只是浮動塊會影響該區域塊的布局，所以要清除浮動塊的影響，所以此時將正常流區域塊外的盒子設定margin等於浮動塊的寬度既可以清除影響。

6. position:absolute左右布局

絕對定位，產生脫離文件流的布局現象。absolute可以覆蓋任何位置的元素且不會影響正常流的布局，但是會產生遮蓋。

三欄自適應布局：兩邊定寬，中間block寬度自適應。

1.絕對定位法

將左右兩邊使用absolute定位，因為絕對定位脫離文件流，後面的center會自然流動到上面，然後使用margin屬性，留出左右元素的寬度，既可以使中間元素自適應螢幕寬度。

2. 使用自身浮動法

對左右使用分別使用float:left和float:right，float使左右兩個元素脫離文件流，中間元素正常在正常文件流中，使用margin指定左右外邊距對其進行乙個定位。同時父盒子設定 overflow: auto; 來避免子盒子溢位

3. 聖杯布局

聖杯布局的原理是margin負值法。使用聖杯布局首先需要在center元素外部包含乙個div，包含div需要設定float屬性使其形成乙個bfc，並設定寬度，並且這個寬度要和left塊的margin負值進行配合。

對於行內元素(inline)：text-align: center;

對於塊級元素(block)：設定寬度且 marigin-left 和 margin-right 是設成 auto，使用 max-width 替代 width。

對於多個塊級元素：對父元素設定 text-align: center;，對子元素設定 display: inline-block;（vertical-alinga:top）；或者使用 flex 布局

flex 布局： display:flex； justify-content:center

對於行內元素(inline)

單行：設定上下 pandding 相等（或者設定 line-height 和 height 相等）

多行：設定上下 pandding 相等；或者設定 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用偽元素

對於塊級元素(block)：（下面前兩種方案，父元素需使用相對布局）

已知高度：子元素使用絕對布局 top: 50%;，再用負的 margin-top 把子元素往上拉一半的高度

未知高度：子元素使用絕對布局 position: absolute; top: 50%; transform: translatey(-50%);

使用 flexbox：選擇方向，justify-content: center;

定高定寬：先用絕對布局 top: 50%; left: 50%;，再用和寬高的一半相等的負 margin 把子元素回拉

高度和寬度未知：先用絕對布局 top: 50%; left: 50%;，再設定 transform: translate(-50%, -50%);

使用 flexbox：justify-content: center; align-items: center。

當你設定乙個元素為 box-sizing: border-box; 時，此元素的內邊距和邊框不再會增加它的寬度。

inline-block 元素影響垂直居中，加vertical-align：top。

ps：參考鏈結：介紹 css 布局，學習css布局，css經典布局，使用css實現三欄自適應布局，