* 元素不可见，不占据空间，不渲染（图片不会加载资源），键盘无法访问
```
<script>
<img src="1.jpg"/>
</script>
```
* 元素不可见，不占据空间，渲染（图片会加载资源），键盘无法访问
```
.hidden {
display: none;
}
```
* 元素不可见，不能点击，占据空间，键盘无法访问
```
.hidden {
visibility: hidden;
}
```
* 元素不可见，不能点击，占据空间，键盘可以访问
```
.hidden {
position: relative;
z-index: -1;
}
```
* 单单是元素看不见
```
.opacity {
opacity: 0;
filter: Alpha(opacity=0);
}
```
在firefox下，`display: none`的元素的背景图是不加载的，父元素如果是`display: none`，图片也不会去加载。在其他浏览器（非IE）中，若父元素`display: none`，则图片不加载，如果自身`display: none`，则加载。IE浏览器则是无论如何都会加载。
`type=hidden`是天然的`display: none`，适合放置id或token这些信息。
```
<input type="hidden" name="id" value="1"/>
```
visibility具有继承性，并且子元素可以独立控制自己的显示与否：父元素`visibility: hidden`则子元素也会看不见。但是，如果子元素设置了`visibility: visible`，则子元素会显示出来。而`display: none`不一样，父元素`display: none`则子元素也会看不见，如果给子元素设置了`display: 其他值`，子元素照样看不见，一切以父元素设置的为准。
