1. 自然布局
即遵循元素自身的属性，块级元素从上到下显示，行内元素从左到右显示，宽度达到最大范围时自动折行（根本用不到，只有网络差加载不出样式的时候才能看到）
2. 浮动布局
通过浮动属性改变元素的布局方式，让元素在一行显示
- float: left 左浮动：从浮动的第一个盒子开始，从左到右显示，宽度到达最大值时自动折行
- float: right 右浮动：同上，但是是从右到左显示
- float: inherit 继承父级元素的浮动方式
- float: none 不浮动
元素浮动会脱离文档流，影响父级元素的高度，可以清除浮动，即清除浮动元素对其他元素的影响
清除浮动：
- 在最后一个浮动元素的后面写
<p style='clear: both'></p>，即在一个空的块级元素里写clear:both- 给父级元素加一个高度
- 给父级元素设置伪元素：
div:after {content: ''; clear: both; display: block;}注：文字，行内元素，行内块级元素会围绕浮动元素排列，没有浮动的块级元素会霸占浮动元素的位置；且浮动元素可以识别父级元素的宽度
3. 层布局：通过定位属性改变元素的布局方式，让元素有层级关系
- position: relative 相对定位：
- 相对定位的参照物是元素本身原来的位置
- 不会改变其他元素的位置
- 不会改变自身元素的属性
- position: absolute 绝对定位
- 没有参照物时，参照物是body
- 以父级中设置了position: relative/absolute的元素为参照物，也可以用position: relative/absolute来设置参照物
- 参照物不能是兄弟元素
- 改变元素自身属性，脱离文档流
- position: fixed 固定定位
- 参照物：可视窗口
- 改变元素自身属性，脱离文档流
- z-index 设置层叠元素上下位置
- 与position属性一起使用，如果两个元素都设置了position: absolute; top: 0; left: 0时，根据书写顺序决定，谁写在后面，谁就在上面显示
- 定位元素没有设置z-index时，默认为0
4. 居中
- 单行文字，行内元素，input的垂直居中：设置行高即可，让line-height与height的值相同
- 水平居中：给块级元素设置text-align: center，让内容水平居中，给块级元素设置margin: 0 auto可以让元素水平居中
- vertical-align: middle：文字与图片居中对齐（文字没有被标签包裹）
- 绝对居中：
- 用固定定位：设置position: fixed; top: 50%; left50%; 然后设置margin-top和margin-left为元素宽高的一半（负值）即可，如果元素未知宽高可以把margin替换成transform: translate(-50%,-50%)
- 用display: flex; justify-content: center; align-items: center可以让内容绝对居中
- 给元素设置：margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
