面试官：怎样实现左右元素固定，中间元素自适应的三栏布局？总结8种~

深碍√TFBOYSˉ_ 2023-03-01 12:25 7阅读 0赞

> 常见的布局方式有: 浮动布局、Position定位、弹性(flex)布局、table布局、网格(grid)布局。
> 
> 前提是左右宽度(假如左右宽度为100px),整个高度已知(假如高度为500px)，中间宽度自适应。

# 1.浮动布局 #

--------------------

## float的实际初衷 ##

仅仅使为了实现文字环绕问题。

## float的感性认知： ##

1.  包裹性：
    
    1.  收缩：元素应用了float后，宽度收缩，紧紧地包裹住内容（即元素的宽度收缩到元素内的内容的宽度大小
    2.  坚挺：原来没有高度，但元素应用了float后，元素的高度突然扩展到内容的高度大小
    3.  隔绝：元素应用了float后，盒子里面的内容发生了任何事情，都与盒子外的内容无关（BFC）
2.  破坏性:
    
    1.  子元素应用了float后，父容器塌陷：父容器的高度变为0

## 实现过程 ##

左右两个元素使用float浮动使左右两个元素脱离文档流，中间元素使用margin根据左右元素设置左右边距。

## 浮动布局的优缺点 ##

浮动布局是由局限性的，浮动元素是要脱离文档流，要注意做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷。   
浮动布局的优点就是比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的。

## 代码块  ##

.left{
        position: absolute;
        left: 0;
        width: 300px;
        background-color: red;
    }
    .middle{
        position: absolute;
        left: 300px;
        right: 300px;
        background-color: blue;
    }
    .right{
        position: absolute;
        right: 0;
        width: 300px;
        background-color: #3A2CAC;
    }

# 2.position定位 #

--------------------

## position定位的优缺点 ##

绝对定位布局很快捷，设置很方便，而且也不容易出问题，但是它的子元素也是脱离文档流的，导致有效性很低。

## 实现过程 ##

左右两个div使用绝对定位absolute使其脱离文档流，中间的middle自然流动到他们上面，然后使用margin属性留出左右div的宽度即可使中间div自适应宽度。

## 代码块 ##

#left{
            float: left;
            width: 100px;
            height: 100%;
            background: blue;
        }
        #right{
            float: right;
            width: 100px;
            height: 100%;
            background: darkgoldenrod;
        }
        #middle{
            height: 100%;
            margin: 0 100px;
            background: red;
        }

**注意：这里注意，中间元素要放在最后，防止元素下沉。**

# 3.flex弹性布局 #

felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。   
felxbox的缺点就是不能兼容IE8及以下浏览器。

.father{
                width: 100%;
                height: 500px;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
            }
            #left{
                flex:0 1 100px;
                height: 100%;
                background: blue;
            }
            #right{
                flex:0 1 100px;
                height: 100%;
                background: darkgoldenrod;
            }
            #middle{
                flex: 1;
                height: 100%;
                background: red;
            }

# 4.table #

table是一种常见的布局方式,他可以将整个页面按照表格的方式设置为多行多列,但是由于书写table标签比较麻烦尤其是涉及到table内嵌table的时候，所以CSS给我们提供了display: table的方式可以让让们方便的使用table布局, 设置子元素为列的属性为display:table-cell

#main{
          display: table;
          width: 100%;
          height: 500px;
        }
        .left,.middle,.right{
          display: table-cell;
        }
        .left{
          width: 100px;
          background: red;
        }
        .middle{
          margin: 0 100;
          background: aqua;
        }
        .right{
          width: 100px;
          background: seagreen;
        }

<div id="main">
        <div class="left"></div>
        <div class="middle">
          <h2>我是center</h2>
        </div>
        <div class="right"></div>
      </div>

# 5.网络布局(gird) #

#main{
        width: 100%;
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: 100px auto 100px;
    }
    .left{
          background: red;
        }
        .middle{
          background: aqua;
        }
        .right{
          background: seagreen;
        }

<div id="main">
            <div class="left"></div>
            <div class="middle">
              <h2>我是center1</h2>
            </div>
            <div class="right"></div>
          </div>

# 6.BFC #

#main{
      text-align: center;
      line-height: 100px;
    }
      .left{
        width: 100px;
        height: 100px;
        background-color: #ddd;
        float: left;
      }
      .right{
        width: 100px;
        height: 100px;
        background-color: #ddd;
        float: right;
      }
      .middle{
        height: 100px;
        background-color: #ccc;
        /*触发BFC*/
        overflow: hidden;
      }

<div id="main">
            <div class="left"></div>
            <div class="right"></div>
            <div class="middle">
                <h2>我是center1</h2>
            </div>
        </div>

# 7、圣杯布局 #

#main{
            margin: 0 100px 0 100px;
            line-height: 500px;
        }
        .left{
            width: 100px;
            height: 500px;
            float: left;
            position: relative;
            left: -100px;
            margin-right: -100%;
            background: red;
        }
        .right{
            position: relative;
            width: 100px;
            height: 500px;
            float: right;
            background: black;
            margin-right: -100px;
            
        }
        .middle{
            width: 100%;
            height: 500px;
            background: floralwhite;
            float: left;
        }

<div id="main">
            <div class="left"></div>
            <div class="middle">
              <h2>我是center1</h2>
            </div>
            <div class="right"></div>
          </div>

**优点：**结构简单，没有多余的DOM层。  
**缺点：**当center部分的宽小于left部分时就会发生布局混乱。（center<left即会变形）

# 8.双飞翼布局 #

.middle{
        width: 100%;
        float: left;
    
    }
    .center{
        margin: 0 100px;
        height: 500px;
        background: red;
    }
    .left{
        float: left;
        margin-right: -100px;
        width: 100px;
        height: 500px;
        background: rebeccapurple;
    }
    .right{
        float: right;
        margin-left: -100px;
        width: 100px;
        height: 500px;
        background: darkblue;
    }

<div id="main">
            <div class="left"></div>
            <div class="middle">
                <div class="center">center</div>
            </div>
            <div class="right"></div>
        </div>

**优点：**支持各种宽高变化，通用性强。  
**缺点：**DOM结构多一层，增加渲染树生成的计算量。

**个人总结：**

1.  圣杯布局一定要考虑最小宽度的问题，注意center宽度比left小的情况。
2.  flex布局比较实用但是要注意兼容性问题。
3.  不同的布局方式根据自己的业务场景具体使用即可

参考文章：[https://www.cnblogs.com/liuyishi/p/9162501.html][https_www.cnblogs.com_liuyishi_p_9162501.html]

[https_www.cnblogs.com_liuyishi_p_9162501.html]: https://www.cnblogs.com/liuyishi/p/9162501.html