面试官问：你会几种三栏布局方式？ 我答：我会5种。

三栏布局

介绍

什么是三栏布局？

顾名思义，就是将页面分为三部分，分别为左侧栏、中间栏和右侧栏。

中间栏由于其较大的宽度和内容的重要性，自然而然成为用户的视觉中心，而两侧栏作为补充，辅助用户获取更多信息或进行额外操作。

三栏布局的特点

1. 在三栏布局中，两侧栏往往固定宽度，中间栏自适应浏览器宽度，以保证内容区域的最大可用空间。
2. 在三栏布局的代码中，执行的顺序是从上往下。为了让用户可以快速浏览到页面中间栏的内容，要将中间栏的代码放在左侧栏和右侧栏之前，这样页面就会优先加载中间栏的内容。

三栏布局实现方式

圣杯布局（浮动+定位）

html部分

<div class="page">
    <div class="content">中间栏</div>
	<div class="left">左侧栏</div>
	<div class="right">右侧栏</div>
</div>

可以实现三栏布局中的中间栏被优先加载。

css部分

1. 对整个页面的元素进行一个基本的样式重置，将内外边距设置为0。

   * {
       margin: 0;
       padding: 0;
   }

2. 设置基础宽度、高度和背景颜色。

   .page {
       height: 200px;
   }
   .left,.right {
       height: 200px;
       width: 200px;
       background-color: green;
   }
   .content {
       width: 100%;
       height: 200px;
       background-color: red;
   }

3. 为了让元素在一行上排列，将各元素添加float : left浮动样式，但是左侧栏和右侧栏被中间栏挤出第一行了。

   .page div {
       float: left;
   }

4. 为了让左侧栏和右侧栏分别在第一行的最左边和最右边，我们要为中间栏设置左右内边距，这样方便实现三栏布局。

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

5. 要将左侧栏移动到第一行的最左侧，我们可以使用定位操作。

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

   1. 首先执行 margin-left: -200px;左侧栏移动到第一行。

2. 再通过执行 position: relative;和left: -100%;移动到第一行最左侧。也就是通过相对定位，向左移动父容器的宽度大小距离。

6. 将右侧栏移动到第一行的最右侧。

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

   1. 首先执行 margin-left: -200px;左侧栏移动到第一行。

   
   2. 再通过执行 position: relative;和left: -100%;移动到第一行最左侧。也就是通过相对定位，向左移动父容器的宽度大小距离。

特点

1. 实现了三栏布局的页面样式。
2. 实现了中间栏优先加载。

双飞翼布局（浮动）

html部分

<div class="page">
    <div class="content">
        <div class="inner">中间栏</div>
    </div>
    <div class="left">左侧栏</div>
    <div class="right">右侧栏</div>
</div>

与圣杯布局不同的是，中间栏外还有一层。这使得双飞翼布局比圣杯布局优雅一些。

双飞翼布局也实现了中间栏优先加载。

css部分

1. 对整个页面的元素进行一个基本的样式重置，将内外边距设置为0。

   * {
       margin: 0;
       padding: 0;
   }

2. 设置基础宽度、高度和背景颜色。

   .page {
       height: 200px;
   }
   .left,.right {
       height: 200px;
       width: 200px;
       background-color: blue;
   }
   .content {
       height: 200px;
       width: 100%;
       background-color: red;
   }
   .inner {
       height: 100%;
       background-color: pink;
   }

3. 为了让元素在一行上排列，将各元素添加`float : left`浮动样式，但是左侧栏和右侧栏被中间栏挤出第一行了。

.page>div {
float: left;
}

4. 为了让左侧栏和右侧栏分别在第一行的最左边和最右边，我们要为中间栏设置左右外边距，这样方便实现三栏布局。在这里开始与圣杯布局开始不一样了。中间栏的两层盒子的作用开始发挥作用了。

   .inner {
       height: 100%;
       margin: 0 200px;
       background-color: pink;
   }

5. 要将左侧栏移动到第一行的最左侧，我们不需要像圣杯布局那样进行定位操作。通过设置一个负的父级宽度的外边距实现移动左侧栏到第一行的最左侧。是不是比圣杯布局优雅一些。

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

6. 要将右侧栏移动到第一行的最右侧，和将左侧栏移动到第一行最左侧的思想一样。通过设置一个-200px的外边距实现移动右侧栏到第一行的最右侧。

   .right {
       margin-left: -200px;
   }

特点

1. 实现了三栏布局的页面样式。
2. 实现了中间栏优先加载。

相比之下双飞翼布局比圣杯布局更简便一些。

弹性布局

它来了，它带着最优雅的实现三栏布局的方式走来了。它就是弹性布局。

html部分

<div class="page">
    <div class="main">中间栏</div>
    <div class="left">左侧栏</div>
    <div class="right">右侧栏</div>
</div>

一样的配方，一样的味道。不用我说了，你都快要抢答了。没错弹性布局也能实现中间栏内容优先加载。

css部分

1. 对整个页面的元素进行一个基本的样式重置，将内外边距设置为0。

   * {
       margin: 0;
       padding: 0;
   }

2. 设置基础宽度、高度和背景颜色。

   .page {
       height: 200px;
   }
   .main {
       background-color: pink;
   }
   .left,.right {
       width: 200px;
       background-color: blue;
   
   }

3. 使用弹性布局，让子元素在一行上排列。

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

4. 通过对中间栏添加flex:1;样式，让中间栏自适应得扩大到占据完所有的空隙。

   .main {
       background-color: pink;
       flex: 1;
   }

5. 但是这样还没有实现左中右的布局呀，别急。灵魂浇给来了，那就是弹性布局中的order属性。

   order 属性用于设置弹性子元素的排列顺序。它可以是一个整数，也可以是负数，默认值为 0。

   当 order 属性的值为正数时，值越小，排列顺序越靠前。当 order 属性的值为负数时，值越大，排列顺序越靠前。

   我们给左侧栏设置order:0;，给中间栏设置order:1;，给右侧栏设置order:2;。这样排列顺序就是左中右了（并不影响加载顺序，因为加载顺序由html里的代码块顺序决定）。

   .main {
       background-color: pink;
       flex: 1;
       order: 1;
   }
   .left {
       order: 0;
   }
   .right {
       order: 2;
   }

特点

雅，太雅了，感觉世界少了一些勾心斗角。

1. 实现了三栏布局的页面样式。
2. 实现了中间栏优先加载。

表格布局

html部分

<div class="page">
    <div class="left">左侧栏</div>
    <div class="main">中间栏</div>
    <div class="right">右侧栏</div>
</div>

终于把小老弟给盼来了，它不能实现中间栏的布局了。

css部分

1. 老样子，对整个页面的元素进行一个基本的样式重置，将内外边距设置为0；设置基础宽度、高度和背景颜色。

   * {
       margin: 0;
       padding: 0;
   }
   .page {
       width: 100vw;
       height: 200px;
   }
   .left,
   .right {
       height: 200px;
       width: 200px;
       background-color: blue;
   }
   .main {
       width: 100%;
       height: 200px;
       background-color: pink;
   }

2. 通过添加display: table;样式让元素以表格的特性来呈现；添加display: table-cell;样式让元素在同一行内排列；添加table-layout: fixed;样式让列宽由元素自身的宽度决定。

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

特点

可以方便地实现列的对齐和等宽等效果，但是不能实现中间栏优先加载。

网格布局

有来了一个方法，但是它很快。别眨眼。

html部分

<div class="page">
    <div class="left">左侧栏</div>
    <div class="main">中间栏</div>
    <div class="right">右侧栏</div>
</div>

它不能实现中间栏优先加载。

css部分

* {
    margin: 0;
    padding: 0;
}

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

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

.main {
    height: 200px;
    background-color: pink;
}

定义了一个网格布局：

• display: grid; 表示将元素设置为网格布局模式。
• grid-template-columns: 200px auto 200px; 定义了网格的列模板，即明确了有三列，第一列宽度为 200 像素，第二列宽度自动适应（根据内容宽度自动调整），第三列宽度又是 200 像素。

特点

方便地实现元素在网格内的对齐，包括水平和垂直方向。可以精确指定列和行的尺寸，可以是固定值、比例值或自动适应。

但是不能实现中间栏优先加载。