css三栏布局
三栏布局：它是一种经典的布局方式；在页面上呈现左中右三列布局，其特点是左右两端固定，中间宽度自适应，
1.浮动布局
左右两个div分别左右浮动，中间的用magin-left与magin-right撑开 缺点：要考虑清除浮动带来的影响（父容器高度塌陷），主要内容无法最先加载。
2.定位布局
子绝父相 左右两个div分别固定在两边 中间用magin-left与magin-right撑开 缺点：容易脱离文档流，高度未知时，可能出现问题。
3.flex布局（弹性布局）
设置一个能容纳三个盒子的大盒子并设置为display:flex;中间的div设置flex:1(这样做能实现自适应) 缺点：浏览器兼容问题
4.表格布局
设置一个能够容纳三个盒子的大盒子并设置它为display:table;然后在子盒子中设置display:table-cell 缺点：无法设置栏间距，对seo不友好。
5.网格布局（grid）
网格布局（Grid）是最新的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，从而就能做出各种各样的布局。新增的CSS网格布局模块(CSS Grid Layout Module)提供了带有行和列的基于网格的布局系统,它使网页设计变得更加容易,而无需使用浮动和定位。
设置一个能够容纳三个盒子的大盒子并设置它为display：grid;grid-template-columns:200px auto 200px; 缺点：无法实现中间部分优先加载，left与right无法与中间的高度自适应（变化而变化）。
div垂直水平居中的方法：
1.定位
子绝父相 div设置为display：absolute；top:50% left:50%;transform:translate(-50%,-50%)
2.使用flex布局
display：flex;justify-content:center;align-item:center;(不确定宽高的情况)
3.table-cell布局 display:table-cell; text-align:center;vertical-align:center