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 的分割