清除浮动、相对定位、绝对定位、固定定位
·
清除浮动方法：
- 让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow：hidden属性
- 给后面的父盒子设置clear：both属性，clear表示清除浮动对自己的影响，both表示左右浮动都清除
- 使用：：after伪元素给盒子添加最后一个子元素，并且给：：after设置clear：both
相对定位：
position：relative；
盒子可以相对自己原来的位置进行位置调整
位置描述词
- left左移动，right右移动；top下移动，bottom上移动
- 值可以为负数，即往规定方向相反移动
绝对定位：
position：absolute；
可以在浏览器种以坐标进行位置精准描述，拥有自己的绝对位置
位置描述词
- left到左边的距离，right到右边的距离；top到上边的距离，bottom到下边的距离
- 会空出自己的位置，并且漂浮起来（脱离文档流）
绝对定位的参考盒子
- 绝对定位的盒子并不是永远以浏览器为基准点
- 绝对定位的盒子以自己祖先元素种，离自己最近的拥有定位属性的盒子，当作基准点。这个盒子通常是相对定位的，所以这个性质也叫做“子绝父相”
- 绝对定位的盒子垂直居中
堆叠顺序z-index属性
相当于更改层级关系
绝对定位的用用途
- 绝对定位用来制作“压盖、“遮罩”效果
- 绝对定位用来结合CSS精灵使用
- 绝对定位可以结合JS实现动画
固定定位：
position：fixed；
不管页面如何卷动，他永远固定在那里
- 固定定位只能以页面为参考点，没有子固父相这个性质（以浏览器作为参考）
- 固定定位脱离标准文档流
用途：
返回底部、顶部、楼层的导航
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)