定位、回流、重绘

最新推荐文章于 2025-06-04 11:59:02 发布

np918

最新推荐文章于 2025-06-04 11:59:02 发布

阅读量704

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS类文章标签：定位、重绘、回流

本文链接：https://blog.youkuaiyun.com/np918/article/details/95030675

CSS类专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了CSS中六种定位类型：relative, absolute, fixed, static, sticky和inherit的特性与应用。详细解释了每种定位方式如何影响元素的位置，并介绍了top, right, bottom, left等属性的作用。此外，还讨论了回流与重绘的概念，以及各种操作如何触发这些过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定位

relative	absolute	fixed	static	sticky	inherit
相对定位	绝对定位	固定定位	静态定位	粘性定位	继承定位
元素框偏移某个距离	脱离文档流，相对于包含块定位	相对于视窗本身	元素框正常	粘性定位是相对定位和固定定位的混合	规定应该从父元素继承 position 属性的值。

属性：

top:元素上外边距与其包含块上边界之间的距离；
right:元素右外边距与其包含块右边界之间的距离；
bottom:元素下外边距与其包含块下边界之间的距离；
left:元素左外边距与其包含块左边界之间的距离；
overflow:设置元素内容溢出发生的事情;
clip:设置元素的形状;
vertical-align:设置元素的垂直对齐方式
z-index:设置元素的优先级

回流（重排）与重绘

回流	重绘
渲染书的一部分必须要更新且节点的尺寸发生了变化，会触发回流	部分接点需要更新，但是没有改变其形状，会触发重绘
添加、删除元素	~
隐藏元素（display:none）	~
不回流	隐藏元素（viisibility:hidden）
移动元素	~
改变浏览器大小	~
改变浏览器的字体大小	~
改变元素padding、margin、border	~
不回流	改变浏览器字体颜色
不回流	改变元素背景颜色