【CSS布局】已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。

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 布局强大。