乐趣区

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

退出移动版