定位
relative | absolute | fixed | static | sticky | inherit |
---|---|---|---|---|---|
相对定位 | 绝对定位 | 固定定位 | 静态定位 | 粘性定位 | 继承定位 |
元素框偏移某个距离 | 脱离文档流,相对于包含块定位 | 相对于视窗本身 | 元素框正常 | 粘性定位是相对定位和固定定位的混合 | 规定应该从父元素继承 position 属性的值。 |
属性:
top:元素上外边距与其包含块上边界之间的距离;
right:元素右外边距与其包含块右边界之间的距离;
bottom:元素下外边距与其包含块下边界之间的距离;
left:元素左外边距与其包含块左边界之间的距离;
overflow:设置元素内容溢出发生的事情;
clip:设置元素的形状;
vertical-align:设置元素的垂直对齐方式
z-index:设置元素的优先级
回流(重排)与重绘
回流 | 重绘 |
---|---|
渲染书的一部分必须要更新且节点的尺寸发生了变化,会触发回流 | 部分接点需要更新,但是没有改变其形状,会触发重绘 |
添加、删除元素 | ~ |
隐藏元素(display:none) | ~ |
不回流 | 隐藏元素(viisibility:hidden) |
移动元素 | ~ |
改变浏览器大小 | ~ |
改变浏览器的字体大小 | ~ |
改变元素padding、margin、border | ~ |
不回流 | 改变浏览器字体颜色 |
不回流 | 改变元素背景颜色 |
总结:
回流一定会引起重绘,而重绘不一定会引起回流