CSS布局-白红宇

题目：

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

请思考解决方案

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

题目要求真的那么简单吗？

应该怎么回答才好，技巧在哪里

通过这题，如何向面试官证明自己的能力

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

你的方案的优缺点是什么？

假设高度未知，中间高度撑开，左右跟着一起撑开，你的方案是否还满足要求？

你的方案的兼容性如何，在实际开发中，你会选择哪种方案？

默认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：绝对定位


        
     
    
             
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
    
     
    
     
    
复制代码

.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值分别为左右栏的宽度来实现的。

这是绝大多数人都能想到的方案，这方案显然快捷，简单易用，但缺点也是显而易见的，子元素都脱离了文档流，而后的子元素也必须脱离文档流，不然影响布局。

方案二：浮动


        
     
    
     
    
             
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
    
     
    
复制代码

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

总结：

该方案通过对左右栏分为左浮动和右浮动，并设置宽度实现的。

这也是大部分都能想出的方案，该方案的兼容性非常友好，但浮动后元素脱离文档流，需要清除浮动，处理好浮动相邻元素之间的关系。

方案3： flex


        
     
    
             
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
    
     
    
     
    
复制代码

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

总结：

该方案通过父元素设置display: flex，左右栏设置宽度，中间flex: 1来实现的

flex布局是为了解决float与absolute的问题，可以实现中间高度撑开，左右跟着一起撑开，但不兼容IE8及以下

方案4： table布局


        
     
    
             
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
    
     
    
     
    
复制代码

.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布局


        
     
    
             
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
        
      中间部分内容区域
    
     
    
     
    
复制代码

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

总结：

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

拓展

三栏布局

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

两栏布局

左宽度固定，右自适应

右宽度固定，左自适应

上高度固定，下自适应

下高度固定，上自适应