CSS布局方法

　css布局是前端進行頁面設計的基礎，也是全面了解並學習css一個很好的切入點，下面介紹一些css布局的方法。

一、左右布局

1.用浮動float布局

塊級元素尤其是列表元素做橫向結構常用的方法，步驟：1.給子元素中左元素加float:left;右元素加float:right;2.給父元素加clearfix類；3.列表元素寬度設為50%。

2.用絕對absolute定位布局

除了float可以產生脫離文檔流的布局現象以外，position：absolute也可以，步驟：1.在子元素上寫position:absolute；2.在父元素上寫position:relative。

二、左中右布局

1.用浮動float+margin布局

步驟：1.左元素加float:left;右元素加float:right;2.中間元素加margin。

2.用浮動float+absolute布局

三、水平居中

1.用text-align:center

對於內聯元素（inline），inline-block元素，文字，為目標的父元素添加text-align:center。（可使用包裹器技巧）

2.用margin-left/margin-right:auto

對於塊級元素(block)，設置寬度且margin-left和margin-right都設成 auto。

3.調整padding，margin

如不方便直接調整，可以使用包裹器包住元素，然後讓包裹器代為調整。

四、垂直居中

1.用line-height=height

適合內聯元素單獨一行垂直居中。

2.用table方式

首先通過display:table-cell;把div用單元格的形式顯示，然後借用單元格的垂直居中vertical-align: middle; 來達到效果。這樣對圖片也可以居中，上一步 line-height就不能對圖片居中。

3.用absolute+負margin

對於已知高度的塊級元素（block），子元素使用絕對布局top:50%，再用負的margin-top把子元素往上拉一半的高度。

4.調整padding，margin

如不方便直接調整，可以使用包裹器包住元素，然後讓包裹器代為調整。

五、其它小技巧

1.對塊級元素設置inline-block，則元素可以處於同一行，同時還能指定大小，塊級元素寬度自動適合內容，並且塊級元素下方會產生空隙，解決方法是加上vertical-align:top。

2.給內聯元素設置margin和padding都是左右有效，而上下無效，解決辦法是加上display:inline-block。