布局方式

css布局方式：
1、传统盒模型：通过盒模型，使用 display 属性(文档流布局) + position 属性(定位布局) + float属性(浮动布局)
2、文档流布局：按照文档的顺序一个一个显示出来，块元素独占一行行内元素共享一行
3、浮动布局：使用 float 属性，使元素脱离文档流，浮动起来
4、定位布局：通过 position 属性来进行定位，relative、absolute、fixed、static
5、*flex布局：*也称为“弹性布局”,也是用的最多的一种布局方式，是将其 display 属性设置为 flex ，也可以设置行内的 flex；能够简便、完整、响应式地实现各种页面布局；但是含有 Webkit 内核的浏览器，必须加上 -webkit 前缀
6、*table 布局:*但是它也有自身的局限性，比如 table 比其它 html 标记占更多的字节,会阻挡浏览器渲染引擎的渲染顺序;但是某些情况下，当采用其他方式不能很好的达到自己的效果时，采用 table 布局
7、响应式布局:
a、含有meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1">
width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度
b、使用 rem：指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，配合 media query 就可以实现自适应
`