CSS隱藏元素的幾種方式

CSS 中，隱藏一個元素，能夠經過：
opacity: 0;
visibility: hidden;
display: none;
position: absolute;

爲何隱藏一個元素會有那麼多的技巧，並且看起來都是作同樣的事情？實際上，每一個方法技巧都有着各自的不一樣，正是這個差別使不一樣的方法被用在不一樣的特定的場景下。因此，咱們須要看清它們的差別，在適合的地方使用。

Opacity

設置元素透明度
設置透明度爲 0，只是意味着虛擬化地隱藏掉這個元素。元素仍然佔據它本來的位置空間，並影響着頁面的佈局，同時也能響應用戶交互。

對於屏幕閱讀器來講，你想使用 opacity: 0; 來隱藏一個元素是不可能的。屏幕閱讀器仍然會識別它的內容，就像頁面上的其餘元素同樣；也就是說，這個元素表現出來仍是不透明的方式。

值得一提的是，使用 opacity 屬性，能夠創造出一些很是壯觀的動畫效果。

Visibility

設置可見性爲 hidden，被隱藏掉元素任然會影響頁面的佈局。區別是：此次隱藏元素不會捕獲到任何用戶交互。另外，對於屏幕閱讀器來講，是不可見不可識別的。

Display

設置展現方式爲 none，纔是真正意義上的隱藏。
這種方法下，元素的的盒子模型再也不生效，元素不會佔據頁面的位置空間，也不能觸發任何的用戶交互效果，就好像元素不存在了同樣。在任何狀態下，都不能產生動畫效果。

可是注意，這時候，這個元素仍然是 dom 可操做的。

Position

假設你但願一個元素是用戶可交互，可是不會影響頁面佈局的，一個可行的辦法就是將元素移出視窗。

.hide {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

注意，避免將這個方法用在能夠 focus 的元素上，以避免被 foucses 致使預料以外的 jump.
這種方法一般用在給個性化的 checkbox || radio 中。

Clip-path

能夠裁切掉一個元素的某部分區域，達到隱藏的效果，不能支持IE/EDGE。
這裏有一篇介紹：https://www.sitepoint.com/introducing-css-clip-path-property/
這是一個很是 cool 的屬性。不過，更經常使用在動畫效果中，能夠實現不少Amazing的炫酷特效噢。

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

其餘 其餘一些比較 hack 的方法，諸如 height: 0 & font-size: 0; 不經常使用，但在某些很是特殊的場合有須要，但願有夥伴能介紹一下。