正常的默认文档流方式布局就不说了。主要说以下几种布局：
- table布局
- float布局
- position定位布局
- flex布局
- grid布局
- column多列布局
- 移动端布局
css 布局的几种方式
1. table布局
两种方式实现表格布局：HTML Table标签 和 CSS display:table 相关属性。
HTML Table是指使用原生的<table>标签，而CSS Table是指用CSS属性模仿HTML 表格的模型。对应表:
css table 与HTML table 对应表
应用:
- 动态垂直居中对齐,用display:table实现居中对齐
- 动态水平居中对齐,CSS布局：动态水平居中对齐
-
使用display:table实现的圣杯布局
缺点: - table比其它html标记占更多的字节。(造成下载时间延迟,占用服务器更多流量资源)
- table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)
- table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度,增加页面加载时间,增加http会话数)
- 在某些浏览器中,table里的文字的拷贝会出现问题。(会让用户不悦)
- table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%) (限制页面设计的自由性)
- 一旦学了CSS的知识,你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识,会省去你以后大量的时间)
- ‘table对’对于页面布局来说,从语义上看是不正确的。(它描述的是表现,而不是内容)
- table代码会让阅读者抓狂。(不但无法利用CSS,而且会不知所云,尤其在进行页面改版或内容抽取的时候)
- table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。
- 对 seo 不友好
- 嵌套复杂，阅读性变差
参考链接：
https://www.cnblogs.com/guoyong-feng/p/6076058.html
https://blog.csdn.net/screener/article/details/80895863
我的理解：除了本身就是表格内容的，还是不要用table布局。
2. float布局
水很深，坑很多，很复杂，用的也多。
特性:
- 元素‘浮动’，脱离文档流，但不脱离文本流
- 对自身影响，形成“块”（BFC），位置尽量靠上，位置尽量靠左(右)
- 对兄弟元素的影响，上面贴非float元素（一般float元素上面贴的都是非float元素），旁边贴float元素（靠左，或者靠右的时候贴float元素），不影响其它块级元素位置，影响其它块级元素内部文本（后面两点就是特性一说的脱离文档流，不脱离文本流）
- 对父级元素的影响，从布局上“消失”（相当于从父级的空间里面消失了，消失了意味着父级不会再管他的宽高），高度塌陷（因为在父级的空间里消失了，所以父级对高度有可能会塌陷，防止塌陷的办法就是清除浮动）
应用：
- 两栏布局(定位，flex,grid也可以实现)
- 三栏布局 、双飞翼布局、圣杯布局 (定位，flex,grid也可以实现)
清除浮动的方法:
https://www.jianshu.com/p/1ff30625c250
3. position定位布局
https://www.runoob.com/cssref/pr-class-position.html
position属性
4. flex布局
5. grid布局
阮一峰-grid布局
grid是二维布局，很灵活，适合整体构架，而flex是一维布局，适合处理局部细节。
6. column多列布局
多列属性
7. 移动端布局
- meta标签
<meta name="viewport" content="width=device-width, initial-scale=1">
image.png
移动前端开发之viewport的深入理解
其中，width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。 - 使用 rem 单位
- media query
菜鸟教程- @media 查询
菜鸟教程- 多媒体查询
