爱站程序员基地CSS 的布局应该是 CSS 体系中的重中之重了，主要的布局方式有 table 表格布局， flex 盒子布局、float 浮动布局、position 定位布局，grid 网格布局，还有针对于移动端的响应式布局，不论是工作还是面试都是非常重要的知识。
已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。
对于上面这道题，我们分别使用这几种布局方式来实现如下图所示的效果。
table 布局
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>table布局</title><style>.main{height:500px;width: 100%;}.left,.right{width: 300px;background-color: red}.center{background-color: pink}</style></head><body><table class=main><tbody><tr><td class=left></td><td class=\"center\"></td><td class=right></td></tr></tbody></table></body></html>
table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式。
但是它也有自身的局限性，比如 table 比其它 html 标记占更多的字节，造成下载时间延迟，占用服务器更多流量资源；table 会阻挡浏览器渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待更久的时间。但是某些情况下，当采用其他方式不能很好的达到自己的效果时，采用 table 布局能适应当前场景。
我们也可以使用
dispaly:table-cell
方式来实现表格布局。
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\" /><title>table布局</title><style type=\"text/css\">.main{display: table;width: 100%;height: 500px;}.main > div{display: table-cell;}.left,.right{width: 300px;background: red;}.center{background: pink;}</style></head><body><div class=\"main\"><div class=\"left\"></div><div class=\"center\"></div><div class=\"right\"></div></div></body></html>
table-cell 布局的兼容性好，但是有时候不能固定高度，因为会被内容撑高。
flex 布局
<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><title>flex布局</title><style type=\"text/css\">.main{display: flex;height: 500px;}.left,.right{flex-basis: 300px;background: red;}.center{flex: 1;background: pink;}</style></head><body><div class=\"main\"><div class=\"left\"></div><div class=\"center\"></div><div class=\"right\"></div></div></body></html>
flex 布局即弹性盒子布局，它的特点是盒子本来就是并列的，只需要指定宽度。flex 布局方式浏览器的支持不是太好，有一些兼容性的问题，但是是未来布局的趋势。
float 布局
<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><title>float布局</title><style type=\"text/css\">.main > div{height: 500px;}.left{float: left;width: 300px;background: red;}.right{float: right;width: 300px;background: red;}.center{background: pink;}</style></head><body><div class=\"main\"><div class=\"left\"></div><div class=\"right\"></div><div class=\"center\"></div></div></body></html>
float 布局思路主要是左边一个浮动元素，右边一个浮动元素。这里有个小问题，中间的元素要写在最后，因为中间的块级元素会影响右边浮动元素的定位——如果块级元素在浮动元素之前，浮动元素会把块级元素的位置空出来，造成如下图的效果。
float 布局应该是目前各大网站用的最多的一种布局方式了，兼容性比较好，但是浮动带来的影响比较多，页面宽度不够的时候会影响布局。
绝对定位布局
<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><title>绝对定位布局</title><style type=\"text/css\">.main div{position: absolute;height: 500px;}.left{left: 0;width: 300px;background: red;}.right{right: 0;width: 300px;background: red;}.center{left: 300px;right: 300px;background: pink;}</style></head><body><div class=\"main\"><div class=\"left\"></div><div class=\"center\"></div><div class=\"right\"></div></div></body></html>
绝对定位布局快捷方便，但是有效性比较差，因为脱离了文档流。
网格布局
<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><title>网格布局</title><style type=\"text/css\">.main{display: grid;width: 100%;/* 定义每一行的行高 */grid-template-rows: 500px;/* 定义每一列的列宽 */grid-template-columns: 300px auto 300px;}.left,.right{background: red;}.center{background: pink;}</style></head><body><div class=\"main\"><div class=\"left\"></div><div class=\"center\"></div><div class=\"right\"></div></div></body></html>
网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定\”项目\”针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成\”行\”和\”列\”，产生单元格，然后指定\”项目所在\”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
