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 布局强大。
2098
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
