CSS布局

题目：

三栏布局， 高度已知，左右栏宽度固定300px，中间自适应

请思考解决方案

在看答案之前，看到这题目是不是觉得超级简单的，但是

1. 题目要求真的那么简单吗？
   
2. 应该怎么回答才好，技巧在哪里
   
3. 通过这题，如何向面试官证明自己的能力
   

然后，在你想到的方案中，

1. 你的方案的优缺点是什么？
   
2. 假设高度未知，中间高度撑开，左右跟着一起撑开，你的方案是否还满足要求？
   
3. 你的方案的兼容性如何，在实际开发中，你会选择哪种方案？

默认css样式：

* {margin: 0; padding: 0;}.layout {margin-top: 20px;}.left {min-height: 100px; background-color: red;}.right {min-height: 100px; background-color: blue;}.center {background-color: yellow;}
复制代码

方案1：绝对定位

<section class="layout absolute">    <div class="left"></div>    <div class="center">        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>    </div>    <div class="right"></div></section>复制代码

.absolute {position: relative}
.absolute .left {position: absolute; left: 0; width: 300px;}.absolute .center {position: absolute; left: 300px; right: 300px;}.absolute .right {position: absolute; right: 0; width: 300px;}
复制代码

总结：

• 该方案通过对父元素进行相对定位，子元素都绝对定位，并将左右两栏定位在左右两边，并对中间栏进行定位，left与right值分别为左右栏的宽度来实现的。
  
• 这是绝大多数人都能想到的方案，这方案显然快捷，简单易用，但缺点也是显而易见的，子元素都脱离了文档流，而后的子元素也必须脱离文档流，不然影响布局。
  

方案二：浮动

<section class="layout float">    <div class="left"></div>    <div class="right"></div>    <div class="center">        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>    </div></section>复制代码

.float .left {float: left; width: 300px;}.float .right {float: right; width: 300px;}复制代码

总结：

• 该方案通过对左右栏分为左浮动和右浮动，并设置宽度实现的。
  
• 这也是大部分都能想出的方案，该方案的兼容性非常友好，但浮动后元素脱离文档流，需要清除浮动，处理好浮动相邻元素之间的关系。
  

方案3： flex

<section class="layout flex">    <div class="left"></div>    <div class="center">        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>    </div>    <div class="right"></div></section>复制代码

.flex {display: flex;}.flex .left, .flex .right {width: 300px;}.flex .center {flex: 1;}复制代码

总结：

• 该方案通过父元素设置display: flex，左右栏设置宽度，中间flex: 1来实现的
  
• flex布局是为了解决float与absolute的问题，可以实现中间高度撑开，左右跟着一起撑开，但不兼容IE8及以下
  

方案4： table布局

<section class="layout table">    <div class="left"></div>    <div class="center">        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>    </div>    <div class="right"></div></section>复制代码

.table {display: table; width: 100%;}.table .left, .table .right {width: 300px; display: table-cell;}.table .center {display: table-cell;}复制代码

总结：

• 该方案通过父元素dispaly: table并设置宽度，所有子元素都设置display: table-cell,而其中的左右栏分别设置宽度。
  
• 该方案也可以实现中间高度撑开，左右跟着一起撑开，并且兼容性较好，IE8及以上支持
  

方案5：grid布局

<section class="layout grid">    <div class="left"></div>    <div class="center">        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>        <p>中间部分内容区域</p>    </div>    <div class="right"></div></section>复制代码

.grid {display: grid; grid-template-rows: 100px; grid-template-columns: 300px auto 300px;}复制代码

总结：

• gird布局也成网格布局，通过display: grid来实现，虽然简单实现，但IE10及以上才支持
  

拓展

三栏布局

• 上下高度固定，中间自适应
  

两栏布局

• 左宽度固定，右自适应
  
• 右宽度固定，左自适应
  
• 上高度固定，下自适应
  
• 下高度固定，上自适应