页面布局

题目： 假设高度已知，请写出三栏布局，其中左栏右栏高度各为300px,中间自适应

慕课网视频

能写出有几种方案？

• 方法一：float 浮动
• 方法二：absoulte 绝对定位
• 方法三：table 表格布局
• 方法四：flex
• 方法五：grid网格布局

  
  
  
  



  
假设高度已知，请写出三栏布局，其中左栏右栏高度各为300px,中间自适应
  

    
    
方法一：浮动
    

      

      

      

    
  
  

    
    
方法二：绝对定位
    

      

      

      

    
  
  

    
    
方法三：flex 弹性布局
    

      

      

      

    
  
  

    
    
方法四：table 表格布局
    

      

      

      

    
  
  

    
    
方法五：grid 网格布局
    

      

      

      

    
  

截图

延伸

每个方案各自的优缺点

• 浮动：
  缺点：脱离文档流 要清除浮动
  优点：兼容性好
• 绝对定位
  缺点：脱离文档流，子元素也脱离
  优点：快捷，不易出错
• flex
  缺点：IE兼容性不好 不能兼容IE8及以下浏览器。
  优点：比较完美 特别是移动端
• table 布局
  缺点：当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，而有时候这种效果不是我们想要的。
  优点：兼容性好
• 网格布局
  网格布局也是新出的一种布局方式

把高度已知去掉 哪些适用，哪些不适用

• flex和table布局可以用，其他三种不行