前端知识点之三栏布局 左右宽度固定 上下高度固定 中间自适应 几

“题目：假设高度已知，请写出三栏布局，其中左、右栏的宽度为 300px，中间自适应”
面试经常会遇到这样的一道题来考察对页面布局的基本功，相信大部分人都会想到通过 float 和绝对定位这两种方法来实现，但是想要在面试官面前得到更多的认可，还需要列举出更多的解决办法和优缺点：

三栏布局 左右宽度固定 中间自适应 五种解决办法

以下五种解决办法的公共样式

<style>
  /* 偷懒样式重置 */
  html * { margin: 0; padding: 0; }
  .layout { margin-top: 20px; }
  .layout .container > div { height: 100px; }
</style>

第一种：浮动解决方案：
1.兼容性好，
2.三栏高度互不影响，
3.需要清除浮动

<section class="layout float">
  <style>
    .layout.float .left { float: left; width: 300px; background-color: gray; }
    .layout.float .right { float: right; width: 300px; background-color: gray; }
    .layout.float .center { margin: 0 300px; background-color: #ddd; }
  </style>
  <article class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
      <p>三栏布局 左右宽度固定 中间自适应</p>
      <p>浮动解决方案</p>
    </div>
  </article>
</section>

第二种：绝对定位解决方案：
1.兼容性好，
2.三栏高度互不影响，
3.内容脱离文档流
4.适用范围不广

<section class="layout absolute">
  <style>
  .layout.absolute .container { height: 100px; position: relative; }
  .layout.absolute .left { position: absolute; left: 0; top: 0; width: 300px; background-color: gray; }
  .layout.absolute .right { position: absolute; right: 0; top: 0; width: 300px; background-color: gray; }
  .layout.absolute .center { position: absolute; left: 300px; right: 300px; top: 0; background-color: #ddd; }
  </style>
  <article class="container">
    <div class="left"></div>
    <div class="center">
      <p>三栏布局 左右宽度固定 中间自适应</p>
      <p>绝对定位解决方案</p>
    </div>
    <div class="right"></div>
  </article>
</section>

第三种： flexbox 解决方案：
1.适用于移动端布局，
2.使用简单
3.兼容性较差，
4.如果未设置高度，三栏高度由内容撑开，始终等高

    <section class="layout flexbox">
      <style>
        .layout.flexbox .container { display: flex; }
        .layout.flexbox .left { width: 300px; background-color: gray; }
        .layout.flexbox .right { width: 300px; background-color: gray; }
        .layout.flexbox .center { flex: 1; background-color: #ddd; }
      </style>
      <article class="container">
        <div class="left"></div>
        <div class="center">
          <p>三栏布局 左右宽度固定 中间自适应</p>
          <p>flexbox 解决方案</p>
        </div>
        <div class="right"></div>
      </article>
    </section>

第四种： table 解决方案：
1.兼容性好
2.如果未设置高度，三栏高度由内容撑开，始终等高
3.设置 vertical:middle 可以使内联元素/文本内容垂直居中
4.三栏高度由内容撑开，始终等高

<section class="layout table">
  <style>
    .layout.table .container { display: table; width: 100%; }
    .layout.table .container > div { display: table-cell; }
    .layout.table .left { width: 300px; background-color: gray; }
    .layout.table .right { width: 300px; background-color: gray; }
    .layout.table .center { background-color: #ddd; }
  </style>
  <article class="container">
    <div class="left"></div>
    <div class="center">
      <p>三栏布局 左右宽度固定 中间自适应</p>
      <p>table 解决方案</p>
    </div>
    <div class="right"></div>
  </article>
</section>

第五种： Grid 解决方案:
1.兼容性很差，只支持高版本的浏览器
2.讲真，这个我不太懂，后续学习下。

<section class="layout grid">
  <style>
    .layout.grid .container { display: grid; grid-template-columns: 300px auto 300px; }
    .layout.grid .left { background-color: gray; }
    .layout.grid .right { background-color: gray; }
    .layout.grid .center { background-color: #ddd; }
  </style>
  <article class="container">
    <div class="left"></div>
    <div class="center">
      <p>三栏布局 左右宽度固定 中间自适应</p>
      <p>grid 解决方案</p>
    </div>
    <div class="right"></div>
  </article>
</section>

效果图：

QQ图片20190105152429.png

三栏布局 上下高度固定 中间自适应 四种解决方案

第一种：绝对定位解决方案：

<style>
  /* 偷懒样式重置 */
  html * { margin: 0; padding: 0; }
  html,
  body { width: 100%; height: 100%; }
  .layout { position: relative; width: 100%; height: 100%; }
  .layout .header,
  .layout .footer { height: 100px; width: 100%; position: absolute; background-color: #ddd; }
  .layout .header { top: 0; }
  .layout .footer { bottom: 0; }
  .layout .content { position: absolute; top: 100px; right: 0; left: 0; bottom: 100px; background-color: #999; }
</style>

<!-- 绝对定位 解决方案 -->
<section class="layout">
  <header class="header">头部</header>
  <article class="content">
    <p>中间部分 高度自适应</p>
    <p>绝对定位 解决方案</p>
  </article>
  <footer class="footer">底部</footer>
</section>

第二种： flex解决方案

<style>
  /* 偷懒样式重置 */
  html * { margin: 0; padding: 0; }
  html,
  body { width: 100%; height: 100%; }
  .layout { width: 100%; height: 100%; display: flex; flex-direction: column; }
  .layout .header,
  .layout .footer { height: 100px; width: 100%; background-color: #ddd; }
  .layout .content { flex: 1; background-color: #999; }
</style>

<!-- flex 解决方案 -->
<section class="layout">
  <header class="header">头部</header>
  <article class="content">
    <p>中间部分 高度自适应</p>
    <p>flex 解决方案</p>
  </article>
  <footer class="footer">底部</footer>
</section>

第三种： table解决方案

<style>
  /* 偷懒样式重置 */
  html * { margin: 0; padding: 0; }
  html,
  body { width: 100%; height: 100%; }
  .layout { width: 100%; height: 100%; display: table; flex-direction: column; }
  .layout .header,
  .layout .footer { display: table-row; height: 100px; width: 100%; background-color: #ddd; }
  .layout .content { display: table-row; background-color: #999; }
</style>

<!-- table 解决方案 -->
<section class="layout">
  <header class="header">头部</header>
  <article class="content">
    <p>中间部分 高度自适应</p>
    <p>table 解决方案</p>
  </article>
  <footer class="footer">底部</footer>
</section>

第四种：grid解决方案

<style>
  /* 偷懒样式重置 */
  html * { margin: 0; padding: 0; }
  html,
  body { width: 100%; height: 100%; }
  .layout { width: 100%; height: 100%; display: grid; grid-template-rows: 100px auto 100px; }
  .layout .header,
  .layout .footer { background-color: #ddd; }
  .layout .content { background-color: #999; }
</style>

<!-- grid 解决方案 -->
<section class="layout">
  <header class="header">头部</header>
  <article class="content">
    <p>中间部分 高度自适应</p>
    <p>grid 解决方案</p>
  </article>
  <footer class="footer">底部</footer>
</section>

嗯，对的，和上面的横向排列类似，就是竖直方向浮动不再能用移动端比较，这种需求在常见，需要上下固定，中间部分能滚动，

左宽度固定，右自适应
右宽度固定，左自适应
上高度固定，下自适应
下高度固定，上自适应

还有常见的两栏布局也同样适用以上布局方法

以上为学习笔记，参考资料： 慕课网的课程

源码查看
github https://github.com/liguoyou/layout-demos
或者
码云 https://gitee.com/liguoyou/layout-demos