使用display：none和visibility：hidden隐藏的区别

display:none和visibility:hidden的区别是

1.display:none是彻底消失，不再文档流中占位，浏览器不会解析该元素；

   visibility:hidden是隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，在文档流中占位，浏览器会解析该元素，仍然会影响布局；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），

而visibility切换是否显示时则不会引起回流。

3.hidden="hidden"--是html5中元素的新属性，功能与style="display:none"  一致，不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失。

 

思考：两者能不能响应事件呢？

display:none无法获取焦点 ，无法响应任何事件，（无论是捕获、命中目标和冒泡阶段均不可以）

由于display:none的元素根本不会在界面上渲染，就是连1个像素的都不占，因此自然无法通过鼠标点击命中，而元素也无法获取焦点，那么也不能成为键盘事件的命中目标；

而如果父元素的display为none时，子元素的display必定为none，因此元素也没有机会位于事件捕获或冒泡阶段的路径路径上，因此display:none的元素无法响应事件。

另外：虽然我们无法看到display:none的元素，但当表单提交时依然会将隐藏的input元素的值提交上去。

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

visibility:hidden无法获得焦点，可在冒泡阶段响应事件

由于设置为visibility:hidden的元素其子元素可以为visibility:visible，因此隐藏的元素有可能位于事件冒泡的路径上因此下面代码中，将鼠标移至.visible时，.hidden会响应hover事件显示。

不妨碍form表单的提交