CSS三栏自适应布局、二栏自适应布局

三栏自适应布局：左右宽度300px，中间宽度自适应，整体高度自适应

1）绝对定位法

       左右两边使用absolute定位，绝对定位会使其脱离正常文档流，中间部分会自然流动到他们上面，因此需要使用margin属性，留出左右元素的宽度，这样就使得中间元素可以自适应屏幕宽度；
       该布局的优点：三个div顺序可以任意改变，不足是因为绝对定位，如果页面上还有其他内容，top的值需要小心处理，最好能够对css样式进行一个初始化，如果不对样式进行初始化，则两边和中间的值可能会对不齐；

  
  
  



  
左边
  
中间
  
右边

2）圣杯布局：

       原理是margin负值法，使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其成为一个BFC，并且其宽度要和left块的margin负值进行配合；布局中间部分一定要放在前面，左右顺序不限制，对于left块的margin负值一定要等于wrap的宽度；

  
  
  



  

    
中间
  
  
左边
  
右边

3）自身浮动法：

       对左右使用float:left和float:right使左右两个元素脱离文档流，中间元素在正常文档流中，使用margin指定左右外边距对其进行一个定位，该布局的好处是受外界影响小，但是不足的是三个元素的顺序，center一定要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系，当浏览器很小的时候，右边元素会被击到下一行；

  
  
  



  
左边
  
右边
  
中间

5）flex法：

       在外层包裹一层div，设置为display:flex;中间设置flex:1;但是盒模型默认紧紧挨着，可以使用margin控制外边距，center一定要放到中间；

  
  
  



  

    
左边
    
中间
    
右边
  

三栏布局

两栏自适应布局：

1）绝对定位法：

  
  
  



    
左边
    
右边

2）圣杯布局：

  
  
  



  

    
右边
  
    
左边

3）自身浮动法：

  
  
  



    
左边
    
右边

4）flex方法；

  
  
  



  

    
左边
    
右边
  

两栏布局