关于前端: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 的分割