本文我们主要和大家分享六种css三栏布局方法示例， 谈到布局，首先就要想到定位，当别人问我，css的position定位有哪些取值，分别表示什么意思？呃.....抓头.gif，是时候回归本质，看定义了。
定位
position有六个属性值：static、relative、absolute、fixed、sticky和inherit。
static（默认）：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于父级元素中。
relative：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。
-
absolute：元素框不再占有文档位置，并且相对于包含块进行偏移（所谓包含块就是最近一级外层元素position不为static的元素）。
立即学习“前端免费学习笔记（深入）”；
fixed：元素框不再占有文档流位置，并且相对于视窗进行定位。
sticky：css3新增属性值，粘性定位，相当于relative和fixed的混合。最初会被当作是relative，相对原来位置进行偏移；一旦超过一定的阈值，会被当成fixed定位，相对于视口定位。
三列布局
三列布局，其中一列宽度自适应，在PC端最常用之一，搞定了三列布局，其他一样的套路。
方式一：浮动布局
缺点：html结构不正确,当包含区域宽度小于左右框之和，右边框会被挤下来
我是浮动布局左框
我是浮动布局右框
我是浮动布局中间框
方式二：定位布局
缺点：要求父级要有非static定位，如果没有，左右框容易偏移出去
我是浮动定位左框
我是浮动定位中间框
我是浮动定位右框
方式三：表格布局
缺点：没什么缺点，恐惧table
我是表格布局左框
我是表格布局中间框
我是表格布局右框
方式四：flex弹性布局
缺点：兼容性
我是flex弹性布局左框
我是flex弹性布局中间框
我是flex弹性布局右框
方式五：grid栅格布局
缺点：兼容性 Firefox 52, Safari 10.1, Chrome 57, Opera 44
我是grid栅格布局左框
我是grid栅格布局中间框
我是grid栅格布局右框
方式六：圣杯布局
缺点：需要多加一层标签，html顺序不对，占用了布局框的margin属性
我是圣杯布局中间框
我是圣杯布局左框
我是圣杯布局右框
实现效果：
相关推荐：
