面试之CSS篇 - 实现三栏布局的延伸

本文探讨下面试常谈问题之三栏布局，说到三栏布局，可能你们心中至少也能够想出 2-3 种答案，这些谷歌就一大堆解决方案的题目为何还要拿出来谈谈呢？

这里主要是考察掌握知识度的延伸，好比你能答出几种？ => 这几种方式的优缺点在哪？ => 最佳方案是哪一个以及如何解决这些缺点...

这些能够考验到你是否背题亦或者真正掌握到这些知识点。

高度已知，实现三栏布局，左右 300px 中间自适应。

在实现前先重置一下默认的样式

* {
  margin: 0;
  padding: 0;
}
.layout {
  margin-top: 20px;
}
.layout article div {
  min-height: 100px;
}
复制代码

浮动布局解决方案

左右浮动，给宽度，这样就实现了，是否是很简单~可是也存在一些缺点，后边会讲到。

<section class="layout float">
  <style> .layout.float .left { float: left; width: 300px; background: red; } .layout.float .right { float: right; width: 300px; background: blue; } .layout.float .center { background: yellow; } </style>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
      <h1>浮动解决方案</h1>
      1. 这是三栏布局中间部分 2. 这是三栏布局中间部分
    </div>
  </article>
</section>
复制代码

绝对定位布局解决方案

left/center/right 均给绝对定位，左右给 300px，中间设置 left 300 right 300，也一样实现这个布局~

<!-- 绝对定位解决方案 -->
<section class="layout absolute">
  <style> .layout.absolute .left-center-right > div { position: absolute; } .layout.absolute .left { left: 0; width: 300px; 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>
      1. 这是三栏布局中间部分 2. 这是三栏布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>
复制代码

flex 布局解决方案

父级 box 给 display: flex , 左右宽 300， 中间 flex : 1 ，flex 的灵活性也十分的好用 ~

<section class="layout flexbox">
  <style> .layout.flexbox { margin-top: 140px; } .layout.flexbox .left-center-right { display: flex; } .layout.flexbox .left { width: 300px; background: red; } .layout.flexbox .center { flex: 1; background: yellow; } .layout.flexbox .right { width: 300px; background: blue; } </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>flex 布局解决方案</h1>
      1. 这是三栏布局中间部分 2. 这是三栏布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>
复制代码

table 布局解决方案

父级 display: table; 左中右 display: table-cell;

<section class="layout table">
  <style> .layout.table .left-center-right { width: 100%; display: table; height: 100px; } .layout.table .left-center-right > div { display: table-cell; } .layout.table .left { width: 300px; background: red; } .layout.table .center { background: yellow; } .layout.table .right { width: 300px; background: blue; } </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>表格布局解决方案</h1>
      1. 这是三栏布局中间部分 2. 这是三栏布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>
复制代码

grid 布局解决方案

利用网格布局 ，父级 display: grid; width: 100%; grid-template-columns: 300px auto 300px;

<section class="layout grid">
  <style> .layout.grid .left-center-right { display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; } .layout.grid .left { background: red; } .layout.grid .center { background: yellow; } .layout.grid .right { background: blue; } </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>grid布局解决方案</h1>
      1. 这是三栏布局中间部分 2. 这是三栏布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>
复制代码

优缺点

上面咱们给出 5 种解决方案，那么面试官怎么延伸这个问题呢？ 若是把高度已知去掉，又该如何实现呢？那咱们不止要考虑水平方向的，同时要考虑中间的高度问题。那咱们刚写的五种方案，哪些能够适用，哪些又不能适用了呢 这五种方案的兼容性又如何，最优的解决方案又是哪一个

• float
  • 缺点：在于脱离文档流，意味着它下面的子元素也必须脱离文档流，还须要清除浮动带来的影响，若是处理很差会带来不少问题，这是它自己的局限性
  • 优势：兼容性很好，快捷，不容易出问题
• absolute
• flex
  • 缺点：兼容到 IE 8
  • 在 float 、absolute 出现以后出现的一种布局方式，为了解决两种布局方式的不足。flex 布局方案算是比较完美的一种，尤为是如今移动端基本都是使用 flex 布局
• table
  • 缺点：操做麻烦，对 seo 不友好 ，当某一个单元格高度超出的时候，那么其余单元格也会跟着调整高度，有时候咱们场景是不容许的
  • 优势：兼容性很好，当 flex 解决不了的话，能够尝试下用表格布局
• grid
  • 新出的网格布局，经过 网格布局能够作不少事情，代码精简

当咱们增长内容高度时会发生什么事情呢？

很明显

• 浮动布局文字自动排版到左边了。（浮动的基本原理）
• 绝对定位撑开中间部分的布局，两边不变
• flex 、table 布局中内容撑开盒子的高度 - better
• grid 布局中内容中不撑开高度

关于浮动的问题有能够延伸出来，怎么解决内容向左排版的 bug 呢？建立 BFC ，那么 BFC 又是什么呢，具体我会在下一篇文章介绍。

页面布局总结

• 语义化掌握到位
• 页面布局深入理解
• CSS 基础知识扎实
• 代码书写规范

页面布局的变通

• 三栏布局
  • 左右宽固定，中间自适应
  • 上下高固定，中间自适应
• 两栏布局
  • 左宽度固定，右自适应 或者相反
  • 上宽度固定，下自适应 或者相反

本文产生的代码 css - 实现三栏布局篇

参考 www.bilibili.com/video/av315…