HTML中通過CSS方式隱藏元素方法彙總
阿新 • • 發佈:2021-06-25
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;
}
這個感覺有點傻乎乎的, 掩耳盜鈴, 不過這個經常用來做動畫變換
https://www.98891.com/article-39-1.html
7 旋轉元素, 使與當前頁面垂直
div{
transform: rotateX(90deg);
}
注意點: 這個只是顯示上的變換, 仍然會佔用原元素大小和位置的文件流, 其它各種變換也是如此
8 縮小元素尺寸到自身的0倍
div{
transform: scale(0);
}
注意點: 同上
9 其它 transform 使其假不可見
translateX() translateY() skew()