* 元素不可見，不占據空間，不渲染（圖片不會加載資源），鍵盤無法訪問
```
<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: 其他值`，子元素照樣看不見，一切以父元素設置的為準。
