开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情
浮动篇(float)
让开发人员可以更好的实现左右水平布局.(以前的解决方式是吧元素转为行内块.但这样会有缺陷: 1.性能比较差 2.如果盒子内容超出了宽高,排版会崩塌)
基本上所有标签都可以添加float样式.
float主要两个属性:
1.left 向左浮动
2.right 向右浮动
tips:
1.元素在浮动式会从原来的布局范围脱离.在文档中不再占位
2.浮动会一直到边界/遇到其他浮动元素位置
3.清除浮动:
如果父级元素没有设置高度.盒子会随着内容撑大.但是如果给子元素设置了浮动.它就会脱离原来的位置.这种情况下父级就不会撑大了.
解决方式就是给父级元素设置溢出处理:
overflow:hidden;
这样就可以解决高度崩塌
定位篇(position)
通过定位来指定元素在网页中出现的位置
理论上来说是可以用定位实现大部分的网页布局 -- 不推荐.性能低
绝对定位(absolute): 让元素基于父级位置.在一个指定的坐标出现. 让一个标签,出现在距离上下左右各多少的位置.
- 绝对定位在移动后会脱离文档流.在文档中不再占位
- 它的参照对象是基于父级进行移动.如果没有专门设置父元素的话.它的父级为body(整个网页)
相对定位(relative): 让元素基于自身位置,在原来位置的基础上进行移动.在原来位置里向上下左右移动XX.
- 不会脱离文档流.相对移动之后不影响其他的元素.只是自身位置发生了改变
- 不会改变元素的性质
- 主要适合小范围内的移动
定位的四个方向:
top: ↑
right: →
bottom: ↓
left: ←
单纯写定位是没用的.要结合四个方向来设置距离
父相子绝:
父元素为相对定位,子元素为绝对定位.子元素会根据移动后的父元素位置显示
z-index:
如果元素产生了上下堆叠的时候.可以通过z-index来调整位置.越大越靠上
