六种布局方式总结：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。
圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。
基础HTML：
基础CSS：
对于container，给它设置一个 overflow: hidden 使其成为一个 BFC ，使三栏浮动，并相对定位，给左右两个容器设置 200px 的宽度中间的容器设置 100% 的宽度。
此时 left 和 right 被相对于父元素 container 宽度的 100% 的 center 挤到下面。
BFC 的作用：
步骤：
这时，圣杯布局就完成了，但是在拖到很小的时候，布局会乱，以下是最终样式。
这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的 padding 中的，因此宽度小的时候会出现混乱。
双飞翼布局给 center 部分包裹了一个 main 通过设置 margin 主动地把页面撑开。
基础HTML：
步骤 1 和 2 同圣杯布局
区别：
第三步：
给 main 设置 margin: 0 200px ，同时设置 overflow: hidden 使其成为一个 BFC
这时窗口宽度过小时就不会出现混乱的情况了，关键点在于内容部分是包裹在 main 中。
以下是最终样式：
Flex布局是由CSS3提供的一种方便的布局方式。
基础HTML：
步骤：
flex-shrink :
定义项目的缩小比例，默认为1，如果空间不足则项目缩小，如果有一项为0，其他为1，当空间不足时，前者不缩小。
可以看到，flex 布局是一种极其灵活的布局方式。
以下是最终样式：
基础HTML：
步骤：
这种方式的缺点是依赖于left 和 right 的高度，如果两边栏的高度不够，中间的内容区域的高度也会被压缩。
表格布局的好处是能使三栏的高度统一。
基础HTML：
步骤：
这种布局方式能使得三栏的高度是统一的，但不能使center放在最前面得到最先渲染。
网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系。
基础HTML：
步骤：
仅仅四条样式命令就能完成三栏布局，可见网格布局之强大
1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。2.float浮动布局，absolute绝对定位，flex弹性盒子，table表格布局，grid网格布局 / 栅格化布局
3.移动端布局：流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,
css设计模式
OOCSS——Object Oriented CSS
SMACSS——Scalable and Modular Architecture for CSS
垂直水平均分：
子元素纵向等距排列：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
多列布局，可以实现如传统报刊一样的分栏排版方式。多列布局有3个主要属性: column \column-gap\column-rule.
Column是column-count和column-width的简写属性。
column-count指定列数，column-width指定列宽。
如果同时指定了列数和列宽，则以较宽的一项为准。
Column-gap指定列间距，默认值为normal，即1em的间隙；
还可以用通过Column-rules指定列分隔线，此属性接受与 border 属性相同的值。
多列布局还能实现指定分列、跨列、平衡列内容等特性。
利用分栏还可以实现很多效果。
想直观的看到效果，你可以多看看相关的教程，比如说现在有个视频的系列名称叫做 《Buid New World》，里面有一集专门讲 CSS3 复杂布局形式
