9種HTML中通過CSS方式隐藏元素的方法彙總

1、通過style屬性中的   display : none    （這種是最常用方式之一 ）。

display : none      

這兩種方式的差別是:  display 設定為 none之後, 該元素不占用文檔流。

visibility 設定為 hidden之後, 該元素仍然占用文檔流, 隻不過是看不見了而已。

2 、通過style屬性中的   visibility : hidden   （這種也是最常用的方式之一 ）。

visibility : hidden      

3、通過相對定位移動目前元素到螢幕左側

div{
     position: relative;
     left: -100%
}      

 但是要記住: 

1、元素仍然占用标準文檔流 

2、百分比是相對父元素的寬度和高度的, 并不是相對可視區寬度偏移的

4 、通過元素内文本對齊将子元素移動到父元素右側, 配合超出後不顯示

.div{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}      

 注意點: 此時子元素仍然占用文檔流, 隻是我們隐藏了超出部分。

5、設定元素的寬度和高度為0, 元素直接消失

.div{
    width: 0px;
    height: 0px;
}      

注意點: 

1、标準文檔流是相對于一個容器來說的, 每一個容器有自己的文檔流, 我們隻關心目前元素所在的文檔流 。

2、高度和寬度都設定為0後，我們就可以認為此元素不再占用其父元素的标準文檔流了, 但是這個容器仍然存在, 這個容器也存在一個标準文檔流。

供其子元素使用; 其子元素不會消失， 仍然會正常顯示，但是不會占用其父元素所在的标準文檔流( 即子元素顯示不會受其影響, 此元素占用文檔流的大小也不會受其子元素的影響 )。

6 、設定元素透明度為 0

div{
    opacity: 0;
}      

 這個感覺有點傻乎乎的, 掩耳盜鈴, 不過這個經常用來做動畫變換。

 7、旋轉元素, 使與目前頁面垂直。

div{
    transform: rotateX(90deg);
}      

 注意點: 這個隻是顯示上的變換, 仍然會占用原元素大小和位置的文檔流, 其它各種變換也是如此。

8、縮小元素尺寸到自身的0倍

div{
    transform: scale(0);
}      

 注意點: 同上

9、其它 transform 使其假不可見

translateX()
translateY()
skew()      

本文完〜