页面布局

题目:假设高度已知,请写出三栏布局,其中左栏、右栏宽度客为300px,中间自适应。

各种解决方案




  
  
  页面布局
  


  

浮动解决方案

绝对定位解决方案

flex解决方案

table解决方案

网格布局解决方案

查看效果:https://jsbin.com/xaxujoyisa/1/edit?html,output

优缺点、比较、不定高、兼容性?

浮动:兼容性好
绝对定位:快捷,脱离文档流,可使用性差
flex布局:完美,移动端使用较多,ie低版本不兼容
表格布局:兼容性好,历史原因不建议使用
网格布局:新技术,代码少

不定高的情况下,flex布局和表格布局可以使用

网格布局

CSS网格布局引入了二维网格布局系统,可用于布局页面主要的区域布局或小型组件。查阅

你可能感兴趣的:(页面布局)