定位布局
一、浮动布局的总结
1.同一结构下，如果采用浮动布局，所有的同级别兄弟标签都要采用浮动布局
2.浮动布局的盒子宽度在没有设定时会自适应内容宽度
二、盒子的显隐
display： none；
在页面中不占位，采用定位布局后，显示隐藏都不会影响其他标签布局，不需要用动画处理时
opacity：0；
在页面中占位，采用定位布局后，显示隐藏都不会影响其他标签布局，需要采用动画处理时
三、定位布局
什么是定位布局：可以通过上下左右四个方位完成自身布局的布局方式
相对定位
参考系：自身原有位置
position：relative； => 打开了四个定位方位
1.top | bottom | left | right 都可以完成自身布局，上下取下，左右取左
2.left = -right | top = -bottom
3.布局后不影响自身原有位置
4.不脱离文档流
绝对定位
参考系：最近的定位父级
position：absolute； => 打开了四个定位方位
1. top | bottom | left | right 都可以完成自身布局，上下取上，左右取左
2. 父级必须自己设置宽高
3.完全脱离文档流
固定定位
参考系： 页面窗口
position：fixed; => 打开了四个定位方位
1.top | bottom | left | right 都可以完成自身布局，上下取上，左右取左
2.相对于页面窗口是静止的
3.完全脱离文档流
z-index
修改显示层级（在发生重叠时使用），值取正整数，值不需要排序随意规定，值大的显示层级高
四、流式布局思想
1.百分比
2.vw | vh => max-width(height) | min-width(height)
3.em | rem