前言

在网页设计的江湖里，三栏布局就像一场和谐的三人舞：左边道兄导航带路，从不迷途；中间内容君唱主角，精彩纷呈；右边小弟广告悄悄说，新鲜事儿瞧一瞧。他们各司其职，又相互成就，在代码的舞台上默契共舞，为用户演绎一出出信息丰富的视觉盛宴，那么怎么答三栏布局，才会让面试官们全体起立呢？

1.圣杯布局

xml 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .page {
      height: 200px;
      padding: 0 200px;
    }

    .left,
    .right {
      height: 200px;
      width: 200px;
      background-color: green;
    }

    .page div {
      float: left
    }

    .content {
      width: 100%;
      height: 200px;
      background-color: pink;
    }

    .left {
      margin-left: -200px;
      position: relative;
      left: -100%;
    }

    .right {
      margin-left: -200px;
      position: relative;
      right: -200px;
    }
  </style>
</head>

<body>
  <div class="page">
    <div class="content">主题内容</div>
    <div class="left">广告位</div>
    <div class="right">广告位</div>
  </div>
</body>

</html>

圣杯布局的核心是，既满足三栏布局的要求，又可以让中间的主体内容部分优先加载。我们讲解一下其中的重点部分。

首先给出html部分的基础样式。
对大盒子设置一个外边距200px。
把三个子元素均设置为浮动。
left采用相对定位，首先距离左边-200px,然后相对自己往左移父容器的100%。
right采用相对定位，首先距离左边-200px，然后相对自己右移200px。

2.双飞翼布局

双飞翼布局起源于淘宝UED（User Experience Design，用户体验设计团队），是针对Web页面设计的一种三栏布局技术。该布局方式旨在解决两边固定宽度，中间自适应宽度的需求，同时确保中间内容区域优先加载渲染。双飞翼布局的命名形象地比喻为一只鸟，其中"主体内容"如同鸟的身体，位于HTML结构的最前方，而"侧边栏"（左右两栏）如同鸟的双翼，通过特定的CSS技巧调整位置紧随其后。这种方法是对圣杯布局的一种改进，优化了代码结构和渲染流程，提高了页面加载效率。

xml 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .page {
      height: 200px;
    }

    .left,
    .right {
      height: 200px;
      width: 200px;
      background-color: green;
    }

    .page>div {
      float: left;
    }

    .content {
      height: 200px;
      background-color: red;
      width: 100%;
    }

    .inner {
      margin: 0 200px;
      height: 100%;
    }

    .left {
      margin-left: -100%;
    }

    .right {
      margin-left: -200px;
    }
  </style>
</head>

<body>
  <div class="page">
    <div class="content">
      <div class="inner">主体内容</div>
    </div>
    <div class="left">广告位</div>
    <div class="right">广告位</div>
  </div>
</body>

</html>

我们也来讲解一下其中的重点内容。

把主体内容放在content里面。
page下面的一级div设置为float。
对主体内容设置距离两边200px。
left只要往左移父容器的宽度即可。
right往左移自身宽度即可。

3.flex布局

这是最优雅的方式

xml 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .page {
      height: 200px;
      display: flex;
    }

    .left,
    .right {
      background-color: green;
      width: 200px;
    }

    .content {
      background-color: red;
      flex: 1;
      order: 1;
    }

    .left {
      order: 0;
    }

    .right {
      order: 2;
    }
  </style>
</head>

<body>
  <div class="page">
    <div class="content">主题内容</div>
    <div class="left">广告位</div>
    <div class="right">广告位</div>
  </div>
</body>

</html>

我们看看主要内容

主体内容依然放在首位。
对父容器设置为弹性容器。
让中间的内容占有剩余的全部宽度。
利用顺序order属性改变页面显示顺序（不影响渲染顺序）。

怎么样，是不是既高效又优雅呢?

4. table布局

xml 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .page {
      width: 100vw;
      height: 200px;
      display: table;
      table-layout: fixed;
    }

    .page>div {
      display: table-cell;
    }

    .left,
    .right {
      background-color: green;
      width: 200px;
      height: 200px;
    }

    .content {
      width: 100%;
      height: 200px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="page">
    <div class="left">广告位</div>
    <div class="content">主题内容</div>
    <div class="right">广告位</div>
  </div>
</body>

</html>

这个布局方式虽然不能让主体内容优先被加载，但是仍然满足三栏布局的要求。

对大容器设置为tabel属性，并且让表格列宽由我们设定而不是基于单元格内容。
把子级一级div设置为表格单元格。
中心内容占据剩余100%宽。

5.网格布局

这个布局方式和表格类似，虽然不能让主体内容优先被加载，但是仍然满足三栏布局的要求。

xml 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .page {
      width: 100vw;
      height: 200px;
      display: grid;
      grid-template-columns: 200px auto 200px;
    }



    .left,
    .right {
      background-color: green;
      height: 200px;
    }

    .content {
      height: 200px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="page">
    <div class="left">广告位</div>
    <div class="content">主题内容</div>
    <div class="right">广告位</div>
  </div>
</body>

</html>

网格布局也非常优雅，除了不能优先渲染，剩余的尽是优雅。

我们只需要对大盒子设置为网格，然后利用grid-template-columns: 200px auto 200px属性设置三个子元素的宽就可以了，怎么样，是不是很优雅呢？

6. 小结

三栏布局是一种网页设计布局方式，它将页面横向分为三个等宽或不等宽的垂直区域。这种布局可以让内容更加有序，常见的是左边是导航栏，中间是主要内容区，右边是边栏（如广告、最新动态等）。通过CSS的浮动、定位或Flexbox、Grid布局等技术实现，适应不同屏幕尺寸，提升用户体验。

这样子答三栏布局，面试官们全体起立！

前言

1.圣杯布局

2.双飞翼布局

3.flex布局

4. table布局

5.网格布局

6. 小结