页面布局笔记

页面布局

三栏布局

描述：假设容器的高度已知，写出左右栏宽度固定，中间栏宽度自适应的三栏布局

解决方法：

1. 方法1：浮动

   左栏设置左浮动，右栏设置右浮动，中间栏会自动适应

   优点：兼容性好

   缺点：浮动会导致元素脱离文档流，因此要清除浮动。

2. 方法2：绝对定位

   左栏设置绝对定位并left:0，右栏设置绝对定位并right:0，中间栏设置绝对定位并left和right设为左右栏的宽度即可自适应

   优点：便捷

   缺点：导致子元素也脱离了文档流，实用性差

3. flexbox

   容器设为display：flex，设置左右栏宽度后让中间栏的flex=1即可自适应

   优点：解决了方法1、2的缺点，较完美

4. 表格布局table（淘汰）

   设置容器的宽度为100%，设置三个部分均为表格，对左右单元格的宽度进行设置，中间单元格即会自适应

   优点：兼容性比flex好

   缺点：由于三部分都被当作单元格，如果中间部分变高了，其他部分也会”被迫“变高

5. 网格布局grid

   参数都在容器中设置

   .container{
       display: grid;
       width: 100%;
       grid-template-rows: 100px;//行高
       grid-template-columns: 200px auto 200px;//列宽  
   }
   

   优点：简化代码量，CSS3新增

如果高度未知，由中间栏的内容撑开高度，应选择flex和表格布局，其他布局都不能满足需求。

总结：布局没有绝对的优势之分，根据适用场景选择能满足需求的即可。