前端面试题-页面布局

题目：
假设高度已知，写出三栏布局，其中左右两栏各为300px,中间宽度自适应。

基础代码如下

<style>
      * {
        padding: 0;
        margin: 0;
      }
      .layout {
        margin: 20px 0;
        min-height: 200px;
      }
      .layout div {
        min-height: 200px;/*已知高度*/
        background: #ccf;
      }
      .layout .left {
        width: 300px; /*左栏宽度300px*/
        background: #ffc;
      }
      .layout .right {
        width: 300px; /*右栏宽度300px*/
        background: #cfc;
      }
</style>
<body>
    <!--浮动解决方案-->
    <section class="layout float">
      <div class="left"></div>
      <div class="right"></div>
      <!-- 注意三个模块的顺序，对布局有影响 -->
      <div class="center">float</div>
    </section>
    <!--flex盒模型解决方案-->
    <section class="layout flex">
      <div class="left"></div>
      <div class="center">flex</div>
      <div class="right"></div>
    </section>
    <!--position定位解决方案-->
    <section class="layout position">
      <div class="left"></div>
      <div class="center">position</div>
      <div class="right"></div>
    </section>
    <!--table布局解决方案-->
    <section class="layout table">
      <div class="left"></div>
      <div class="center">table</div>
      <div class="right"></div>
    </section>
    <!--栅格布局解决方案-->
    <section class="layout grid">
      <div class="left"></div>
      <div class="center">grid</div>
      <div class="right"></div>
    </section>
  </body>

一、浮动float解决方案

<style>
      .float .left {
        /*1、设置左边栏往左浮动*/
        float: left;
      }
      .float .right {
       /*2、设置右边栏往右浮动*/
        float: right;
      }
      .float .center {
        /*3、因左右两栏浮动后脱离了文档流，此时中间栏的宽度应该为100%，设置margin可让中间模块宽度自适应*/
        margin: 0 300px; 
      }
</style>

优点：兼容性好

缺点：会带来高度塌陷、影响周围元素布局等问题，需要清除浮动

清除浮动的方法：
清除浮动的原理主要是开启该元素的BFC(块级格式化环境)-BFC的特点之一是：计算BFC的高度时，浮动元素会参与计算。开启元素BFC的方法有
1. 设置该元素的float不为none（可为left/right）
2. 设置该元素的position不为static和relative(可为fixed/absolute)
3. 设置该元素的overflow不为visible(可为hidden/auto)
4. 设置该元素的display为inline-box，table(与table相关的几个值，比如table-cell)

一般我们使用css中的clear属性清除浮动
.clearfix::before,
.clearfix::after{
    content:  '';
    display: table;
    clear: both;
}

二、position定位解决方案

<style>
      .position {
        /*1、设置父元素position为relative*/
        position: relative;
      }
      .position div {
        /*2、设置三个子元素为绝对定位*/
        position: absolute;
      }
      .position .left {
        /*3、设置左边栏的left和top值为0*/
        left: 0;
        top: 0;
      }
      .position .center {
        /*4、中间栏通过设置left和right值实现宽度自适应*/
        left: 300px; 
        right: 300px;
      }
      .position .right {
        /*5、设置右边栏的right和top值为0*/
        right: 0;
        top: 0;
      }
</style>

优点：简便
缺点：设置绝对定位的元素会脱离文档流，对子元素以及周围元素的布局影响较大。

三、flex盒模型解决方案

<style>
      .flex {
        /*1、设置父元素的display属性为flex*/
        display: flex;
      }
      .flex .center {
        /*2、设置中间栏的flex属性值为1*/
        flex: 1;
      }
</style>

优点：为布局而生的属性，解决了flex和position方案的弊端，且移动端支持性好
缺点：IE8及以下不支持

四、table布局解决方案

<style>
      .table {
        /*1、设置父元素的display为table,并将width设置为100%*/
        display: table;
        width: 100%;
      }
      .table div {
        /*2、子元素设置display属性值为table-cell*/
        display: table-cell;
      }
</style>

优点：兼容性好
缺点：三个元素的高度会与当中高度最大的保持一致，且无法修改。

五、grid栅格布局解决方案

<style>
      .grid {
        /*1、将父元素的display设置为grid*/
        display: grid;
        width: 100%;
        /*2、设置行*/
        grid-template-rows: 200px;
        /*3、设置列*/
        grid-template-columns: 300px auto 300px;
      }
</style>

优点：最新css规范，简洁

前端面试题-页面布局

Liane

引用和评论

webpack解决跨域及其原理

CSS 如何模拟“真实的”进度条？

如何在仓库中添加只对自己生效的.gitignore规则？

在ONES的工作体验分享

不要再这样编写 async/await

angular 19 学习记录

微信授权全链路打通指南