visible:hidden会引发重绘与回流
时间: 2023-08-18 15:06:31 浏览: 44
是的,当将元素的样式属性设置为"visibility: hidden"时,元素将不可见,但仍然占据页面布局空间。这意味着其他元素仍然会根据隐藏元素的布局位置进行渲染。
然而,当元素的样式属性设置为"display: none"时,元素不仅不可见,还不会占据页面布局空间。这意味着其他元素不会受到隐藏元素的影响。
在使用"visibility: hidden"时,虽然元素不可见,但浏览器仍然会继续渲染该元素,因此可能会引发重绘和回流。重绘是指更新元素的可视外观,而回流是指重新计算元素的位置和大小。
因此,在性能要求较高的情况下,建议使用"display: none"来隐藏元素,以避免不必要的重绘和回流。
相关问题
display:none与visible:hidden
display:none和visible:hidden都能隐藏元素,但区别在于:
1. display:none会将元素从文档流中完全移除,不占据任何空间,也不会触发任何事件,可以用来完全隐藏一个元素;而visible:hidden会将元素隐藏,但仍会占据相应的空间。
2. display:none是完全不可见,无论是对用户还是搜索引擎;而visible:hidden只是不可见,对搜索引擎是可见的。
所以,如果要完全隐藏一个元素,建议使用display:none。如果想隐藏元素但仍需要占据相应空间,可以使用visible:hidden。
visible:hidden
visible:hidden是CSS中的一种属性值组合,用于控制元素的可见性。
当一个元素的可见性设置为visible时,该元素将会显示在页面上,并且占据相应的空间。这是默认的可见性设置。
而当一个元素的可见性设置为hidden时,该元素将不会显示在页面上,但是仍然占据相应的空间。也就是说,该元素在页面上不可见,但是仍然存在于DOM结构中,并且会影响其他元素的布局。
使用visible:hidden可以在不影响布局的情况下隐藏元素,但是仍然保留其占位空间。这在需要隐藏元素但又不希望改变布局的场景下非常有用。
需要注意的是,使用visible:hidden只是将元素在视觉上隐藏,并不会影响元素的交互性质。也就是说,隐藏的元素仍然可以接收用户的交互事件,例如点击、输入等。