本文详细探讨了CSS中display:none和visibility:hidden的异同。display:none会使元素从渲染树中消失，不占用空间，而visibility:hidden保持元素占用空间，内容不可见。此外，display:none非继承属性，子孙节点无法通过修改属性显示，而visibility:hidden为继承属性，可以通过设置visibility:visible使子孙节点可见。修改display属性通常导致文档重排，而修改visibility仅引起元素重绘。
1. display: none; 与 visibility: hidden; 的区别
相同点：都能让元素不可见
不同点：
1) 渲染树
- display: none; 会让元素完全从渲染树（不是dom树）中消失，渲染的时候不占据任何空间；
- visibility: hidden; 不会让元素从渲染树中消失，渲染元素继续占据空间，只是内容不可见
2) 属性是否可继承
- display: none; 是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示
- visibility: hidden; 是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible; 可以让子孙节点显示
3) 修改属性值
- 修改常规流中元素的display属性通常会造成文档重排
- 修改visibility属性只会造成本元素的重绘
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
