前端
面试题
前端
面试题

一 如何实现两栏布局和三栏布局?

1.1 两栏布局

两栏布局实现效果就是将⻚⾯分割成左右宽度不等的两列，宽度较⼩的列设置为固定宽度，剩余宽度由另⼀列撑满

⽐如 Ant Design ⽂档，蓝⾊区域为主要内容布局容器，侧边栏为次要内容布局容器这⾥称宽度较⼩的列⽗元素为次要布局容器，宽度较⼤的列⽗元素为主要布局容器

pktTtOg.png

这种布局适⽤于内容上具有明显主次关系的⽹⻚

两栏布局⾮常常⻅，往往是以⼀个定宽栏和⼀个⾃适应的栏并排展⽰存在

实现思路也⾮常的简单：

  • 使⽤ float 左浮左边栏
  • 右边模块使⽤ margin-left 撑出内容块做内容展⽰
  • 为⽗级元素添加BFC，防⽌下⽅元素⻜到上⽅内容
<style>
      .box {
        overflow: hidden;
      }
      .left {
        float: left;
        width: 200px;
        background-color: gray;
        height: 400px;
      }
      .right {
        margin-left: 210px;
        background-color: lightgray;
        height: 200px;
      }
    </style>
    <div class="box">
      <div class="left">左边</div>
      <div class="right">右边</div>
    </div>

还有⼀种更为简单的使⽤则是采取：flex弹性布局:

<style>
      .box {
        display: flex;
      }
      .left {
        width: 100px;
      }
      .right {
        flex: 1;
      }
    </style>
    <div class="box">
      <div class="left">左边</div>
      <div class="right">右边</div>
    </div>

flex 可以说是最好的⽅案了，代码少，使⽤简单

注意的是，flex 容器的⼀个默认属性值: align-items: stretch;

这个属性导致了列等⾼的效果。 为了让两个盒⼦⾼度⾃动，需要设置: align-items: flex-start

1.2 三栏布局

实现三栏布局中间⾃适应的布局⽅式有：

  • 两边使⽤ float，中间使⽤ margin
  • 两边使⽤ absolute，中间使⽤ margin
  • 两边使⽤ float 和负 margin
  • display: table 实现
  • flex实现
  • grid⽹格布局

1.2.1 两边使⽤ float，中间使⽤ margin

需要将中间的内容放在 html 结构最后，否则右侧会沉在中间内容的下⽅ 实现代码如下：

<style>
      .wrap {
        background: #eee;
        overflow: hidden;
        padding: 20px;
        height: 200px;
      }
      .left {
        width: 200px;
        height: 200px;
        float: left;
        background: coral;
      }
      .right {
        width: 120px;
        height: 200px;
        float: right;
        background: lightblue;
      }
      .middle {
        margin-left: 220px;
        height: 200px;
        background: lightpink;
        margin-right: 140px;
      }
    </style>
    <div class="wrap">
      <div class="left">左侧</div>
      <div class="right">右侧</div>
      <div class="middle">中间</div>
    </div>

原理如下：

  • 两边固定宽度，中间宽度⾃适应。
  • 利⽤中间元素的margin值控制两边的间距
  • 宽度⼩于左右部分宽度之和时，右侧部分会被挤下去 这种实现⽅式存在缺陷：
  • 主体内容是最后加载的。
  • 右边在主体内容之前，如果是响应式设计，不能简单的换⾏展⽰

1.2.2 两边使⽤ absolute，中间使⽤ margin

基于绝对定位的三栏布局：注意绝对定位的元素脱离⽂档流，相对于最近的已经定位的祖先元素进⾏定位。⽆需考虑HTML中结构的顺序

<style>
      .container {
        position: relative;
      }

      .left,
      .right,
      .main {
        height: 200px;
        line-height: 200px;
        text-align: center;
      }
      .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        background: green;
      }
      .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        background: green;
      }
      .main {
        margin: 0 110px;
        background: black;
        color: yellow;
      }
    </style>
    <div class="container">
      <div class="left">左边固定宽度</div>
      <div class="right">右边固定宽度</div>
      <div class="main">中间⾃适应</div>
    </div>

实现流程：

  • 左右两边使⽤绝对定位，固定在两侧。
  • 中间占满⼀⾏，但通过 margin和左右两边留出10px的间隔

1.2.3 两边使⽤ float 和负 margin

<style>
      .left,
      .right,
      .main {
        height: 200px;
        line-height: 200px;
        text-align: center;
      }
      .main-wrapper {
        float: left;
        width: 100%;
      }
      .main {
        margin: 0 110px;
        background: black;
        color: white;
      }
      .left,
      .right {
        float: left;
        width: 100px;
        margin-left: -100%;
        background: green;
      }
      .right {
        margin-left: -100px; /* 同⾃⾝宽度 */
      }
    </style>
    <div class="main-wrapper">
      <div class="main">中间⾃适应</div>
    </div>
    <div class="left">左边固定宽度</div>
    <div class="right">右边固定宽度</div>

实现过程：

  • 中间使⽤了双层标签，外层是浮动的，以便左中右能在同⼀⾏展⽰
  • 左边通过使⽤负 margin-left:-100%，相当于中间的宽度，所以向上偏移到左侧
  • 右边通过使⽤负 margin-left:-100px，相当于⾃⾝宽度，所以向上偏移到最右侧 缺点：
  • 增加了 .main-wrapper ⼀层，结构变复杂
  • 使⽤负 margin，调试也相对⿇烦

1.2.4 使用display:table实现

<table>标签⽤于展⽰⾏列数据，不适合⽤于布局。但是可以使⽤ display: table 来实现布局的效果:

<style>
      .container {
        height: 200px;
        line-height: 200px;
        text-align: center;
        display: table;
        table-layout: fixed;
        width: 100%;
      }
      .left,
      .right,
      .main {
        display: table-cell;
      }
      .left,
      .right {
        width: 100px;
        background: green;
      }
      .main {
        background: black;
        color: white;
        width: 100%;
      }
    </style>

    <div class="container">
      <div class="left">左边固定宽度</div>
      <div class="main">中间⾃适应</div>
      <div class="right">右边固定宽度</div>
    </div>

实现原理：

  • 父层通过 display: table设置为表格，设置 table-layout: fixed 表⽰列宽⾃⾝宽度决定，⽽不是⾃动计算
  • 内层的左中右通过 display: table-cell设置为表格单元
  • 左右设置固定宽度，中间设置 width: 100% 填充剩下的宽度

1.2.5 使用flex实现

利⽤ flex 弹性布局，可以简单实现中间⾃适应:

<style type="text/css">
      .wrap {
        display: flex;
        justify-content: space-between;
      }
      .left,
      .right,
      .middle {
        height: 100px;
      }
      .left {
        width: 200px;
        background: coral;
      }
      .right {
        width: 120px;
        background: lightblue;
      }
      .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
      }
    </style>
    <div class="wrap">
      <div class="left">左侧</div>
      <div class="middle">中间</div>
      <div class="right">右侧</div>
    </div>

实现过程：

  • 仅需将容器设置为 display:flex; ，
  • 盒内元素两端对齐，将中间元素设置为 100% 宽度，或者设为 flex:1 ，即可填充空⽩
  • 盒内元素的⾼度撑开容器的⾼度 优点：
  • 结构简单直观
  • 可以结合 flex 的其他功能实现更多效果，例如使⽤ order 属性调整显⽰顺序，让主体内容优先加载，但展⽰在中间

1.2.6 grid布局

<style>
      .wrap {
        display: grid;
        width: 100%;
        grid-template-columns: 300px auto 300px;
      }
      .left,
      .right,
      .middle {
        height: 100px;
      }
      .left {
        background: coral;
      }
      .right {
        background: lightblue;
      }
      .middle {
        background: #555;
      }
    </style>
    <div class="wrap">
      <div class="left">左侧</div>
      <div class="middle">中间</div>
      <div class="right">右侧</div>
    </div>