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表單的提交