本文已参与「新人创作礼」活动，一起开启掘金创作之路。

css 布局

六种布局方式总结：圣杯布局、双飞翼布局、Flex 布局、绝对定位布局、表格布局、网格布局。

圣杯布局：是指布局从上到下分为 header、container、footer，然后container 部分定为三栏布局。这种布局方式同样分为 header、container、footer。圣杯布局的缺陷在于center 是在 container 的 padding 中的，因此宽度小的时候会出现混乱。

双飞翼布局给 center 部分包裹了一个 main 通过设置 margin 主动地把页面撑开。

Flex 布局是由 CSS3 提供的一种方便的布局方式。

绝对定位布局是给 container 设置 position: relative 和 overflow: hidden，因为绝对定位的元素的参照物为第一个 postion 不为 static 的祖先元素。 left 向左浮动，right 向右浮动。center 使用绝对定位，通过设置 left 和 right 并把两边撑开。 center 设置top: 0 和bottom: 0 使其高度撑开。

表格布局的好处是能使三栏的高度统一。

网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。

网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系。

三栏布局的实现方式，尽可能多写，浮动布局时，三个div 的生成顺序有没有影响

三列布局又分为两种，两列定宽一列自适应，以及两侧定宽中间自适应

两列定宽一列自适应：

1、使用 float+margin： 给 div 设置 float：left，left 的 div 添加属性 margin-right：left 和center 的间隔px,right 的div 添加属性 margin-left：left 和 center 的宽度之和加上间隔

2、使用 float+overflow： 给 div 设置 float：left，再给 right 的 div 设置 overflow:hidden。这样子两个盒子浮动，另一个盒子触发 bfc 达到自适应

3、使用 position： 父级 div 设置 position：relative，三个子级 div 设置 position：absolute，这个要计算好盒子的宽度和间隔去设置位置，兼容性比较好，

4、使用 table 实现： 父级 div 设置 display：table，设置 border-spacing：10px//设置间距，取值随意,子级div 设置 display:table-cell，这种方法兼容性好，适用于高度宽度未知的情况，但是margin失效，设计间隔比较麻烦，

5、flex 实现： parent 的 div 设置 display：flex；left 和 center 的 div 设置 margin-right；然后right 的div设置 flex：1；这样子 right 自适应，但是 flex 的兼容性不好

6、grid 实现： parent 的 div 设置 display：grid，设置 grid-template-columns 属性，固定第一列第二列宽度，第三列 auto， 对于两侧定宽中间自适应的布局，对于这种布局需要把 center 放在前面，可以采用双飞翼布局：圣杯布局，来实现，也可以使用上述方法中的 grid，table，flex，position 实现