隐藏元素

介绍五种隐藏元素的方式，分别为display、visibility、opacity、position、clip-path。

display

将display属性设为none确保元素不可见并且连盒模型也不生成。被隐藏的元素不占据任何空间，子元素也会一同从盒子模型中消失。给他和它的子元素添加的任何动画效果交互效果都会不起作用。任何用户对该元素直接的交互操作都不生效，此外，读屏软件^?也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。不过请注意，通过DOM依然可以访问到这个元素。

visibility

将它的值设为hidden将隐藏我们的元素。被隐藏的元素依然会对我们的网页布局起作用。它不会响应任何用户交互。此外元素在读屏软件中会被隐藏，想要显示它的某个子孙元素，只要将那个元素的visibility显式设置为visible即可。

opacity

设置一个元素的透明度。将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。该属性是兼容IE9以上的浏览器，IE8 以及更早的版本支持替代的 filter 属性，例如： filter:Alpha(opacity=0)。

position

假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity和visibility影响布局,display不影响布局但又无法直接交互）。在这种情况下，只能考虑将元素移出可视区域。这个办法既不会影响布局，有可能让元素保持可以操作。你得避免使用这个方法去隐藏任何可以获得焦点的元素，因为如果那么做，当用户让那个元素获得焦点时，会导致一个不可预料的焦点切换。通过设置position: absolute;left: 10000px;可以实现。

clip-path

该属性是通过裁剪的方法实现隐藏的。被隐藏的内容依然占据着那个位置，它周围的元素的行为就如同它可见时一样。clip-path之所以没有很普及，是因为其浏览器兼容问题。在IE中是完全不支持的，所以，建议用的时候一定要加上内核前缀。具体的clip-path详解请戳：clip-path