CSS隐藏元素的五种方法

1、opacity:0
2、visibility:hidden
3、diaplay:none
4、position:absolute

display

display属性依照词义真正隐藏元素。将display属性设为none确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦display设为none任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过度动画是无效的，他的任何不同状态值之间的切换总是会立即生效。

不过请注意，通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。就跟其他未被隐藏的元素一样，例如$(“”)等

position

有些时候，我们可能会遇到这样一种情况，我们希望某个元素能够不影响我们的页面布局，但是我们又想与之交互，这种情况下opacity 和 visibility会 影响布局， display 不影响布局但又无法直接交互，所以以上这三种都不能满足这种需求，这时候我们就可以使用Position这个属性将元素移出可视区域，这样既不会影响布局，又能让元素可以操作。(就像又建了一层图层)不过我们要避免使用这个方法去隐藏任何可以获得焦点的元素，因为如果那么做，当用户让那个元素获得焦点时，会导致一个不可预料的焦点切换问题。这个方法在创建自定义复选框和单选按钮时经常被使用。

opacity:0

opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。这一位着将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。

visibility

第二个要说的属性是visibility。将它的值设为hidden将隐藏我们的元素。如同opacity属性，被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外元素在读屏软件中会被隐藏。

注意，如果一个元素的visibility被设置为hidden，同时想要显示它的某个子孙元素，只要将那个元素的visibility显式设置为visible即可。visibility与display:none不同的地方还在于被设置visibility:hidden的元素的子孙元素若是被设置成visibility: visible;的话，那么该元素就是可见的，但是display:none则不同，即使它的子孙元素被设置成display:block，该子孙元素也是不可见的。

总结：

1、diaplay:none  真正意义上的隐藏，页面源码都不显示隐藏的页面源码，隐藏的元素不占用任何空间，元素的盒空间都不生成，好像元素就不存在，但是可以通过DOM操作访问到，如$(" ")

2、position:absolute 为了不影响页面布局又想与之交互，opacity 和 visibility会 影响布局， display 不影响布局但又无法直接交互 position属性将元素移出原来的页面显示（像是页面上的又一层）并可以与之交互，如填表单之类的可以使用

3、opacity:0 opacity属性时设置元素的透明度，会影响页面布局 但只是不可见 元素位置显示一块空白，会影响页面交互操作

4、visibility:hidden  也只是显示不可见，元素位置处显示一块空白，会影响布局，不过不会影响交互操作。