CSS布局

左右布局

1. 方法1：float+overflow:hidden
   如果是普通的两列布局，浮动+普通元素的 margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器

 
 
 
 
left
 
 
 
 
 
 
right
 
 
right
 
 
 
 
.parent { 
overflow: hidden; 
zoom: 1; 
} 
.left { 
float: left; 
margin-right: 20px; 
} 
.right { 
overflow: hidden; 
zoom: 1; 
} 

2.方法2：Flexbox 布局

//html部分同上 
.parent { 
display:flex; 
} 
.right { 
margin-left:20px; 
flex:1; 
} 

3.方法3：Grid 布局

//html部分同上 
.parent { 
display:grid; 
grid-template-columns:auto 1fr; 
grid-gap:20px 
} 

左中右布局

1.浮动布局

 
 
 
  
  
  
 
 
  
 
 
  
 
三栏布局
 
 
 
 
 
 
 // 右栏部分要写在中间内容之前 
 
 
 
浮动解决方案
 
 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案； 
 
 
 
 
 
 
 
 

这种布局方式，dom 结构必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。 浮动布局的优点就是比较简单，兼容性也比较好。但浮动布局是有局限性的，浮动元素脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。

2.flexbox 布局

 
 
 
  
 
三栏布局
 
 
 
 
 
 
 
 
flexbox解决方案
 
 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案； 
 
 
 
 
 
 
 
 

flexbox 布局是 css3 里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用 flexbox。 flexbox 的缺点就是 IE10 开始支持，但是 IE10 的是-ms 形式的

水平居中

1.行内元素水(display: inline)平居中（文本、图片等）是通过给父元素设置 text-align：center；来实现的。

行内元素水平居中

2.定宽块状元素(dispaly: block)水平居中（块状元素的width是一个固定值），满足块状和定宽两个条件时，即可通过给自己设置“左右margin为auto”来实现。

  
不定宽块状元素水平居中
        

3.不定宽块状元素水平居中
3.1.利用flex实现水平居中

  
不定宽块状元素水平居中

3.2改变块状元素的 dispaly 属性为 inline， 然后给父级设置 text-aline：center 来实现水平居中， 这种方法的缺点是不能再给元素设置宽高了

  
不定宽块状元素水平居中
        

垂直居中

1.上下padding相同

  
  
  


  

    
设置
    
上下padding一致
    
即可
    单行文本居中
  
  

2.绝对定位固定宽度垂直居中

  
  
  


  

    
绝对定位实现居中
    
固定宽高
  

3.绝对定位不固定宽度垂直居中

  
  
  


  

    
不固定宽度居中1
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor veniam atque, quidem unde ad mollitia accusantium sit voluptatibus porro aliquam officiis, eveniet ullam placeat et adipisci doloremque eius. Aliquid, consequatur.
  

4.首屏垂直居中display:table-cell

  
  
  


  

    

      
首屏垂直居中demo
      
父元素display:table
      
子元素display:table-cell
      
      确定
    
  
  
main
  
footer

5.首屏垂直居中:display:inline-block

  
  
  


  

    

      
首屏垂直居中demo
      
1.伪元素      display:inline-block;
      height:100%;
      vertical-align:middle; 
      
2.      display:inline-block;
      vertical-align:middle;
      确定
    
  
  
main
  
footer

6.vertical-align:middle