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

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

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

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

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

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

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

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

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

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

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

不妨碍form表单的提交