CSS常見佈局技巧

1. 三欄佈局

如下主要討論三欄佈局，兩欄和多欄同理，

浮動+clear實現

子元素浮動，父元素添加清除浮動，html以下：

<div class="wrapper clearfix">
    <div class="left">左邊欄</div>
    <div class="middle">中間欄中間欄中間欄中間欄中間欄</div>
    <div class="right">右邊欄</div>
</div>
複製代碼

CSS以下：

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}
.wrapper{
    max-width: 360px;
    margin: 0 auto;
    border: 1px solid;
}
.left{
    width: 20%;
    float: left;
    background: #1aa;
}
.middle{
    width: 60%;
    float: left;
    background: #77a;
}
.right{
    width: 20%;
    float: left;
    background: #a7a;
}
複製代碼

顯示效果：

table-cell

利用CSS3單元格實現，把left，middle，right類改成以下形式便可。

.left{
    display: table-cell;
    width: 20%;
    background: #1aa;
}
.middle{
    display: table-cell;            
    background: #77a;
}
.right{
    display: table-cell;
    width: 20%;
    background: #a77;
}
複製代碼

顯示效果與上相同，而且中欄可自適應窗口。不過table-cell只適用於較新的瀏覽器，爲了適應老瀏覽器還能夠用負邊距法。

2. 水平居中

行內元素水平居中

適用於文字，連接，及其inline或者inline-block、inline-table和inline-flex。給要居中元素父元素添加：

.container{
    text-align:center;
}
複製代碼

塊狀元素的水平居中

給父元素設置width，給居中元素設置以下規則：

.block{
    margin:0 auto;
}
複製代碼

若父元素寬度未知，則可先設爲display: inline-block，再按行內元素方法(tac)居中。

3. 垂直居中

行內垂直居中

把line-height設置成和height同樣高便可。若是有n行文字，那麼將行高設爲容器高度的n分之一便可。或者設置上下pandding相等

固定寬高居中

先下移50%，再上移自身高度一半。 結構以下：

<div id="big">
    <div id="small"></div>
</div>
複製代碼

樣式以下：

#big {
    position:relative;
    height:480px;
}
#small {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px;
}
複製代碼

4. 小技巧

1. 用max-width自適應，而非width（會有滾動條）。
2. <span>不接受設置寬高。改inline-block，計算padding，從裏面作出去。
3. 子絕父相，在子元素上寫p:abs，父元素寫p:rel。
4. CSS重置用於取消瀏覽器的內置樣式，可參考YUI和Eric Meyer的樣式表。
5. 下載東西要新開頁面，因此用<a>而非<button>。
6. 讓padding、margin不改寬度：box-sizing: border-box;