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 的联系