CSS常見佈局技巧

zachcoco發表於2019-01-03
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;
}
複製程式碼

顯示效果：

CSS常見佈局技巧

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;

相關文章