面试如果问你三栏布局,怎样回答可以加分?

2022年8月21日 176次阅读来源: 陈坚泓

《面试如果问你三栏布局,怎样回答可以加分?》

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

如果面试过程(多是一面)面试官问我们三栏布局,我们会怎么回答?

我们想回答多少种做法,回答一两种做法,只是勉强到及格线,

如果回答四五种,面试官可能就会觉得我们css基础掌握还不错

可是如果想在这道题目上加分,还得将题目延伸

a:假设我们回答出五种方法,那么这五种方法各自有什么优缺点?

b:假设去掉高度已知条件,这五种方法还能实现嘛?

c:五种方法的兼容性如何?

首先给出5种做法,float.absolute,flex,table,grid

假设高度为100px

1/5:float实现三栏布局

代码如下:

  <section class="layout float">
    <style>
      .layout.float div {
        height: 200px;
      }

      .layout.float .left {
        float:left;
        background: gray;
        width: 300px;
      }

      .layout.float .right {
        float: right;
        background: blue;
        width: 300px;
      }

      .layout.float .center {
        background: yellow;
      }
    </style>
    <article class="left-right-center">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h1>浮动解决方案</h1>
      </div>
    </article>
  </section>

效果如下

《面试如果问你三栏布局,怎样回答可以加分?》

float布局优缺点:

优先:兼容性好

缺点:浮动元素脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。

float有三个值：none、left、right（不浮动、向左浮动、向右浮动）；使用浮动时，整个元素块就会脱离文档流，也会脱离出该元素的父元素包含的范围，成为独立元素块，但该元素块不会影响它前面的元素块，但会影响它的父元素和父元素后面的兄弟元素、该元素下面的兄弟元素。

解决问题的本质是：把float的元素块控制在父元素的内部，使浮动效果只在父元素内。有两种方法：

1、父元素使用overflow：hidden、auto、scroll。原理是：对父元素的子元素进行计算，判断是否有超出父元素的大小，这样就会促使对float元素计算在内，使float元素块被控制在父元素内，不会脱离父元素的范围，依然是父元素的一部分。这样就只是在父元素内float，父元素外依然是正常流分布。

2、在float元素的下一个兄弟元素内使用clear:both;是该兄弟元素认为float元素依然存在正常文档流中，这样也起到和上面1相同的作用。

目的：让float元素块控制在父元素的范围内，成为父元素的一部分，只在父元素内部起到浮动作用。不会脱离父元素的包围范围内。

优缺点内容来自(https://www.jianshu.com/p/bbde87714e5f)

假设高度不确定,当float的元素高度超过同一行其他的元素后,会变成下面这样

《面试如果问你三栏布局,怎样回答可以加分?》

2/5:absolute实现三栏布局

代码如下:

  <section class="layout absolute">
    <style>
      .layout.absolute {
        height: 100px;;
      }

      .layout.absolute div {
        position: absolute;
        height: 100px;
      }

      .layout.absolute .left {
        width: 300px;
        left: 0;
        background: red;
      }

      .layout.absolute .center {
        left: 300px;
        right: 300px;
        background: yellow;
      }

      .layout.absolute .right {
        right: 0;
        width: 300px;
        background: blue;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h1>绝对定位解决方案</h1>
      </div>
      <div class="right"></div>
    </article>
  </section>

效果如下

《面试如果问你三栏布局,怎样回答可以加分?》

绝对定位布局优缺点:

优点:快捷，方便，不容易出问题

缺点:容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就导致了这种方法的有效性和可使用性是比较差的。

假设高度不确定,三栏的高度有可能一个高一个矮,需要另外处理

3/5:flexbox实现三栏布局

代码如下:

 <section class="layout flexbox">
    <style>
      .layout.flexbox .left-center-right {
        display: flex;
      }

      .layout.flexbox  div {
        flex-basis: 300px;
        height: 100px;
      }

      .layout.flexbox .left {
        background: red;
        flex-shrink: 0;
      }

      .layout.flexbox .right {
        background: blue;
        flex-shrink: 0;
      }

      .layout.flexbox .center {
        flex-grow: 1;
        background: yellow;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h1>flexbox解决方案</h1>
      </div>
      <div class="right"></div>
    </article>
  </section>

效果如下

《面试如果问你三栏布局,怎样回答可以加分?》

flexbox布局优缺点:

优点:flexbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。

缺点:部分浏览器,一些较低版本的浏览器不支持

假设高度不确定,由于flex容器内的元素flex-shrink属性默认值为1,所以当任何一栏高度撑开时,另外两栏也会跟着撑开

4/5:table布局实现三栏布局

代码如下:

  <section class="layout table">
    <style>
      .layout.table .left-center-right {
        display: table;
        height: 100px;
        width: 100%;
      }

      .layout.table .left-center-right>div {
        display: table-cell;
      }

      .layout.table .left {
        width: 300px;
        background: red;
      }

      .layout.table .center {
        background: yellow;
        text-align: center;
        line-height: 100px;
      }

      .layout.table .right {
        width: 300px;
        background: blue;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h1>table解决方案</h1>
      </div>
      <div class="right"></div>
    </article>
  </section>

效果如下:

《面试如果问你三栏布局,怎样回答可以加分?》

表格布局优缺点:

优点:兼容性很好,在flex布局不兼容的时候，可以尝试表格布局。当内容溢出时会自动撑开父元素。

缺点:①无法设置栏边距；②对seo不友好；③当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，第三点看实际需求,可能是优先,可能是缺点

假设高度不确定,内容溢出时会自动撑开父元素,当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高

5/5:网格布局(grid)实现三栏布局

代码如下:

  <section class="layout grid">
    <style>
      .layout.grid .left-center-right {
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
      }

      .layout.grid .left {
        background: red;
      }

      .layout.grid .center {
        background: yellow;
        line-height: 100px;
        text-align: center;
      }

      .layout.grid .right {
        background: blue;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h1>网格布局解决方案</h1>
      </div>
      <div class="right"></div>
    </article>
  </section>

效果如下:

《面试如果问你三栏布局,怎样回答可以加分?》