--- theme: fancy --- # 前言在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高，而且在面试中，被问到的几率还是挺大的。 ## 两栏布局两栏布局想要的效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满比如我们常见的`Element`文档用的就是两栏布局，左边侧边栏占少部分内容，蓝色区域为主要内容布局容器 ![element.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/75055fe3cec244e3aa57f12efbff3915~tplv-k3u1fbpfcp-watermark.image?) ## 三栏布局三栏布局按照左中右的顺序进行排列，通常中间列最宽且会随着屏幕自适应宽度，左右两列次之比如`vant`的文档就是三栏布局 ![vant.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ba2da913259496a8a966109055447bd~tplv-k3u1fbpfcp-watermark.image?) # 两栏布局两栏布局非常常见，实现思路也很简单，一般是左边固定宽度，右边自适应宽度 ### 浮动实现 - 使用`float`使左边容器浮动 - 右边容器使用`margin-left`撑出宽度做内容显示 - 父容器添加BFC，让子容器撑起其高度代码如下 ```

left

right

``` ### flex弹性布局实现 - 给父容器添加`display:flex` - 左边容器设置宽度 - 右边容器`flex:1`占据剩余宽度代码如下 ```

left

right

``` `flex`可以说时最简单的方法,代码量少，但是要注意一点，`flex`容器默认`align-items: stretch;`，这会导致两个容器会一直等高，如果不想等高可以给父容器设置一个`align-items: flex-start;`属性 # 三栏布局面试中三栏布局被问到的概率会很大，而且大概率会问道圣杯双飞翼布局，三栏布局主要就是要实现左右两边容器宽度固定，中间容器自适应 ### 两边使用 absolute，中间使用 margin - 左右两边容器相对父容器定位 - 左边 `top:0; left:0;` 右边 `top:0;right:0;` - 中间占满一行，但通过 margin和左右两边留出位置代码如下： ```

center

left

right

``` ### 圣杯布局(两边使用 float 和负 margin) - 三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面。 - 父级盒子设置左右`padding`，三个盒子全部浮动，设置中间盒子宽度100%。 - 左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度。 - 最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开。 ```

center

left

right

``` 圣杯布局不需要添加dom节点，正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，当center部分的宽小于left部分时就会发生布局混乱。 ### 双飞翼布局(两边使用 absolute，中间使用 margin) - 三个盒子对应三个元素，其中中间盒子套了两层，中间盒子内部盒子设置`margin`。 - 三个盒子全部浮动，设置中间盒子宽度100%。 - 左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度。 - 后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开。代码如下： ```

center

left

right

``` 双飞翼布局优点是不会像圣杯布局那样变形，CSS样式代码更简洁，缺点是多加了一层dom节点 ### 使用 display: table 实现 `` 标签用于展示行列数据，不适合用于布局。但是可以使用 `display: table;` 来实现布局的效果 - 先通过 display: table设置为表格，设置 `table-layout: fixed` 表示列宽自身宽度决定，而不是自动计算。 - 内层的左中右通过 display: table-cell设置为表格单元。 - 左右设置固定宽度，中间设置 width: 100% 填充剩下的宽度。代码如下： ```

left

center

right

``` ### display: grid; 网格布局 - 将父容器设置成网格布局 - `grid-template-columns: 200px auto 200px;` 设置三列网格其中左右分别200px，中间自适应代码如下： ```

left

center

right

``` ### display:flex; 弹性布局 - 将父容器设置为`display:flex;`。 - 盒内元素两端对齐，将中间容器设置`flex:1`，填充空白区域。代码如下： ```

left

center

right

```