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