css常见布局

左右布局

最常见之一：方法有两种浮动 float和flex；

float

使元素浮动脱离文档流
具体实现和效果

  /*--HTML-- */         

  
  

 /*--CSS--*/   
.clearfix::after{       /*--清浮动-- */   
  content:"";
  display:block;
  clear:both;
}
.parents{
  height:300px;
  border:1px solid #000;
  
}
.child-l{
  float:left;  /*--左浮动-- */   
  border:2px solid red;
  height:200px;
  width:30%;
}
.child-r{
  float:right;  /*--右浮动-- */   
  border:2px solid blue;
  height:200px;
  width:30%;
}

flex：

Flexible Box 的缩写，意为弹性布局


  
  

.parents{
     display:flex; /*使用弹性布局*/
     justify-content:space-between; /*使parents里面的子元素两端对齐*/
     height:300px;
     border:1px solid #000;
  
}
.child-l{
  border:2px solid red;
  height:200px;
  width:30%;
}
.child-r{
  border:2px solid blue;
  height:200px;
  width:30%;
  }

image.png

左中右布局：

float：


  
  
  

/*css*/
.clearfix::after{       /*--清浮动-- */   
  content:"";
  display:block;
  clear:both;
}
.parents{
  height:300px;
  border:1px solid #000;
  
}
.child-l{
  float:left;  /*--左浮动-- */   
  border:2px solid red;
  height:200px;
  width:30%;
}
.child-c{
  float:left;  /*--左浮动-- */   
  border:2px solid green;
  margin-left:4.2%;/*--左外边距（3个合资border占用所以不是5%）-- */
  height:200px;
  width:30%;
}
.child-r{
  float:right;  /*--右浮动-- */   
  border:2px solid blue;
  height:200px;
  width:30%;
}

flex:

.parents{
     display:flex;/*使用弹性布局*/
     justify-content:space-between; /*使parents里面的子元素两端对齐*/
     height:300px;
     border:1px solid #000;
  
}
.child-l{
  border:2px solid red;
  height:200px;
  width:30%;
}
.child-c{
  border:2px solid green;
  height:200px;
  width:30%;
}
.child-r{
  border:2px solid blue;
  height:200px;
  width:30%;
}

inline-block:




  
  JS Bin



  
  
  



/*css*/
.parents{
  border:1px solid #000;
  
}
.child-l{
  display: inline-block;
  
  border:2px solid red;
  height:200px;
  width:30%;
}
.child-c{
  display: inline-block;
  border:2px solid green;
  margin:0 3.25%;/*--左右外边距-- */
  height:200px;
  width:30%;
}
.child-r{
  display: inline-block;
  border:2px solid blue;
  height:200px;
  width:30%; 
}

image.png

居中

水平居中

margin实现块级元素水平居中
给设置好宽度的块级元素设置的margin: 0 auto;实现水平居中

inline-block实现水平居中
给元素设置display: inline-block;,设置父级元素的属性width: 100%;text-align: center;

flex实现水平居中
父级元素设置display: flex;justify-content: center;即可

垂直居中

利用padding或line

可以设置上下padding
line-height和height相等实现。

利用display: table

父级元素设置display: table;,子元素设置display: table-cell;vertical-align: middle;
注意需要把父级元素font-size设置为0。如果想要兼容ie8及以下，需要把::before改为:before。

利用position定位

父级元素设置position: relative;，子元素设置positon:absolute;,在利用margin实现垂直居中

flex

父级元素设置flex和align-items: center

参考文档：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://www.jianshu.com/p/bf56714392a2