首先来看一下 CSS的发展历程：
image.png
早期的<table>布局
在web1.0的时代，网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。在这个阶段，网站的内容主要是文字内容和图片为主，制作方法也主要使用表格拼装为主。印象中，那时候网页三剑客非常出名，画个表格，往里填充图片，文字，就叫网页了。那时最流行的就是<table>布局，现在基本已经不用了。
table布局.png
在某些场合，使用Table是100%的适合、恰当和正确。比如，用table做表格是完全正确的。但是用table来布局会有很多缺点：
- Table要比其它html标记占更多的字节。
(延迟下载时间，占用服务器更多的流量资源。) - Tablle会阻挡浏览器渲染引擎的渲染顺序。
(会延迟页面的生成速度，让用户等待更久的时间。） - Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。
(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。) - 在某些浏览器中Table里的文字的拷贝会出现问题。
(这会让用户不悦。) - Table会影响其内部的某些布局属性的生效(比如
<td>里的元素的height:100%)
(这会限制你页面设计的自由性。) - 一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。
(先花时间学一些CSS知识，会省去你以后大量的时间。) - table对对于页面布局来说，从语义上看是不正确的。
(它描述的是表现，而不是内容。) - table代码会让阅读者抓狂。
(不但无法利用CSS，而且会你不知所云) - table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。
(特别难改！！！)
position布局
随着CSS的强大和HTML更多元素标签的出现，布局不在局限于table。
而对于后端或者说早期的前端人员（网页设计师），常采用的布局是采用CSS中的position各属性（fixed、absolute等）来布局。这种方式的布局能让更快速达到想要的布局效果。css的position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局，使用top,left,bottom,right来调整元素位置。虽然这种方式能快速实现Web的布局效果，但也受到很多的局限性：
- 需要明确指定元素的大小
- 需要明确计算元素位置坐标
- 难于维护
float浮动布局
其实CSS中的浮动，它的初衷并不是用来布局的，而是用来处理文本的一种排版方式，它的布局方式是把 标签从文档流中拉出来，然后后面的标签就会填补当前标签的位置。。但是广大的CSSer发挥其无穷的智慧，硬是将其用于Web的布局当中，而且这种布局方式成为一种主流的布局方式，并且持续了很多年。直到Flexbox布局的出现和移动端的兴起，浮动布局才慢慢的被其取替。
使用了这种浮动布局后，还需要去考虑流的破坏与保护。
在使用浮动布局这些年当中，从中还演变出来很多种布局方式，比如说，固定布局、流式布局（液体布局）、自适应布局和响应式布局等。
flex弹性布局
弹性布局flex（Flexible Box），十分灵活，避免了传统css代码繁复的问题，可以快速实现垂直居中等效果。flex布局比较适合一维的，所以在页面中适合用来做局部的布局，如导航、菜单等。
1.垂直居中
image
.container {
display: inline-flex;
align-items: center;
justify-content: center;
}
2.一侧固定，一侧自适应
image
.container {
display: flex;
.sidebar {
width: 100px;
}
.content {
flex: 1;
}
}
3.多列等高
image
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: stretch;
}
大家又称flex是重新定义了浏览器“书写方式”。
- flex-direction 改变主轴方向；
-
flex-wrap 改变交叉轴方向
flex布局是围绕父元素和轴来进行布局的。这种全新的思路巧妙地只需要简单几行代码就可以实现曾经头疼的效果，其思路的建立过程非常值得借鉴。
兼容性：
image.png
grid
看demo
grid的布局只支持高版本的浏览器
image.png
兼容性总结
适用场景总结
参考资料：
css布局的发展史：http://www.php.cn/css-tutorial-407255.html
grid快速开发：https://www.css88.com/archives/8512
css布局总结：https://www.cnblogs.com/enjoymylift/p/5990119.html
css常见布局总结：https://blog.csdn.net/liujie19901217/article/details/50895715
居中实现的主要场景：https://www.jianshu.com/p/bd17a30fc7aa
网友评论