display: none和visibility: hidden的区别

（一身傲骨，不畏冰霜）

 

CSS: display: none和visibility: hidden的区别：

通俗的说法：display: none不占用原来的位置，而visibility: hidden保留原来的位置。

问题：为什么display: none不占用原来的位置，但可以用js操作元素节点呢？

解答：根据浏览器的渲染原理，浏览器会解析HTML标签生成DOM Tree，解析CSS生成CSSOM，然后将DOM Tree和CSSOM合并生成Render Tree，元素在Render Tree中对应0或多个盒子，然后浏览器以盒子模型的信息布局和渲染界面。而设置为display: none的元素则在Render Tree中没有生成对应的盒子模型，因此后续的布局、渲染工作就没有了，至于DOM操作还是可以的。

两者比较：

1、父元素设为display: none时，子元素继承父元素的情况（子元素设置为display: block也无效）；

2、父元素设为visibility: hidden，而子元素可以设置为visibility: visible并且生效；

3、display: none的元素无法响应任何事件，visibility: hidden的元素可在冒泡阶段响应事件；

4、CSS中的counter会忽略display: none的元素，不会忽略visibility: hidden的元素；

5、display: none的元素设置Transition无效，visibility: hidden的元素设置Transition有效；

6、display变化时将触发reflow，visibility变化不会触发reflow；

7、display: none和visibility: hidden的元素都无法获取焦点；

8、display: none和visibility: hidden都不影响form表单提交数据，但当表单提交时依然会将隐藏的元素的值提交上去；

 

转载于:https://www.cnblogs.com/weijuanran/p/CSS.html