CSS佈局策略

1. 左右佈局
2. 左中右佈局
3. 水平居中
4. 垂直居中
5. 等其餘小技巧

前述

本文簡介一些經常使用的css佈局方案，和一些佈局使用的標籤的用法以及注意事項

---

左右佈局

1 浮動佈局 float

先對父級僞元素清除浮動

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.left-box{
    float:left;
}
.right-box{
    float:right;
}

---

左中右

三個盒子 就給三個盒子設置寬度

.left-box{
    float:left;
    width:30%;
}
.middle-box{
    float:left;
    width:40%;
}
.right-box{
    float:right;
    width:30%;
}

---

#### 水平居中
###### 行內元素

父元素設置（text-align:center）

###### 塊級元素

magin： 0 auto；
   .son{
        position: absolute;
        left: 50%;
        transform:translate(-50%,0);
   }
   .son{ 
        position:absolute; 
        width:50px; 
        left:50%;
        margin-left:-25px; }

---

垂直居中

若元素是行內塊級元素, 基本思想是使用display: inline-block, vertical-align: middle和一個僞元素讓內容塊處於容器中央.

.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}

.son{
    position:absolute;
    top:50%;
    -webkit-transform: translate(0,-50%);  
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

設置父元素相對定位(position:relative), 子元素以下css樣式:

.son{
    position:absolute;
    height:固定;
    top:0;
    bottom:0;
    margin:auto 0;
}

tips：
display: inline-block;

vertical-align: top

死記硬背 inlineblock 和vertical 的聯繫