本文对比了CSS中display:none与visibility:hidden两个属性的区别。display:none让元素从渲染树中消失，不占据空间；visibility:hidden则仅使元素内容不可见但仍占据空间。此外还讨论了这两种属性对屏幕阅读器的影响及修改时造成的页面重绘或重排。
相同点：
- 他们都能让元素不可见
区别：
display: none： 会让元素完全从渲染树种消失，渲染的时候不占据任何空间；visibility: hidden； 不会让元素从渲染树种消失，渲染树元素继续占据空间，只是内容不可见display: none是非继承属性，子孙节点消失由于元素从渲染树消失造成的，通过修改子节点属性无法显示；visibility: hidden是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visiblie可以让子孙节点显示。- 修改常规流中元素的
display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。 - 读屏器不会读取
display: none元素内容。 会读取visibility: hidden元素内容
扫一扫
2251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
