页面布局--三栏布局

页面布局

题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应
延伸而出的问题
1、每个方案的优缺点

• 浮动问题
  优点：兼容性比较好
  缺点：浮动后是脱离文档流的，要清除浮动
• 绝对定位
  优点：快捷，也不容易出问题
  缺点：因为已经脱离文档流，意味着子元素也脱离了文档流，导致这个方案的可使用性比较差
• flex布局
  css3新出现的布局，就是为了解决上面两个的不足。尤其是在移动端，所以是比较完美的一个
• 表格布局
  优点：兼容性好，当要支持ie8的时候，flex不兼容可以考虑表格布局
  缺点：除了历史上诟病的以外，还有一个就是三栏布局，其中一栏增高的时候，其它两个也会增高，有的场景是不需要联动增高的。
• 网格布局
  因为之前栅格布局的出现，css专门出的网格布局技术，用少量简单的代码实现以前复杂的场景
  2、把已知高度去掉，哪个不在适用
  通过调试，缩小浏览器宽度或或添加center内容，证明只有flex和table布局是完好的。
  3、它们的兼容性，业务中哪个最实用

  
  
  
  



  
  

    
    

      

      

      

        
浮动解决方案
        1、这是三栏布局中间部分
        1、这是三栏布局中间部分
      
    
  

  
  

    
    

      

      

        
绝对定位解决方案
        1、这是三栏布局中间部分
        1、这是三栏布局中间部分
      
      

    
  

  
  

    
    

      

      

        
flexbox解决方案
        1、这是三栏布局中间部分
        1、这是三栏布局中间部分
      
      

    
  

  
  

    
    

      

      

        
table解决方案
        1、这是三栏布局中间部分
        1、这是三栏布局中间部分
      
      

    
  

  
  

    
    

      

      

        
grid解决方案
        1、这是三栏布局中间部分
        1、这是三栏布局中间部分