9種HTML中通過CSS方式隱藏元素的方法

來源 |?http://www.fly63.com/article/detial/10109?type=1

1、?通過style屬性中的? ?display : none??? { 這種是最常用方式之一 }

display : none

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

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

2 、通過style屬性中的?? visibility : hidden? { 這種也是最常用的方式之一 }

visibility : hidden

3 、通過相對定位移動當(dāng)前元素到屏幕左側(cè)

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

?但是要記住:?

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

4 、通過元素內(nèi)文本對齊將子元素移動到父元素右側(cè), 配合超出后不顯示

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

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

5 、設(shè)置元素的寬度和高度為0, 元素直接消失

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

注意點:?

1 標(biāo)準(zhǔn)文檔流是相對于一個容器來說的, 每一個容器有自己的文檔流, 我們只關(guān)心當(dāng)前元素所在的文檔流?
2 高度和寬度都設(shè)置為0后, 我們就可以認(rèn)為此元素不再占用其父元素的標(biāo)準(zhǔn)文檔流了, 但是這個容器仍然存在, 這個容器也存在一個標(biāo)準(zhǔn)文檔流, 供其子元素使用; 其子元素不會消失, 仍然會正常顯示, 但是不會占用其父元素所在的標(biāo)準(zhǔn)文檔流( 即子元素顯示不會受其影響, 此元素占用文檔流的大小也不會受其子元素的影響 )

6 、設(shè)置元素透明度為 0

div{    opacity: 0;}

?這個感覺有點傻乎乎的, 掩耳盜鈴, 不過這個經(jīng)常用來做動畫變換

?7、 旋轉(zhuǎn)元素, 使與當(dāng)前頁面垂直

div{    transform: rotateX(90deg);}

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

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

div{    transform: scale(0);}

?注意點: 同上

9 、其它 transform 使其假不可見

translateX()translateY()skew()

本文完~