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

display : none

這兩種方式的區(qū)別是:  display 設置為 none之后, 該元素不占用文檔流。

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

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

visibility : hidden

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

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

 但是要記住: 

1、元素仍然占用標準文檔流 
2、百分比是相對父元素的寬度和高度的, 并不是相對可視區(qū)寬度偏移的

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()

本文完?