HTML中通過CSS方式隱藏元素

2021-10-17 23:11:38 字數 1199 閱讀 1338

1 通過style屬性中的   display : none    

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

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

2 通過style屬性中的   visibility : hidden  

visibility : hidden
3 通過相對定位移動當前元素到螢幕左側

div
但是要記住: 

1 元素仍然占用標準文件流 

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

4 通過元素內文字對齊將子元素移動到父元素右側, 配合超出後不顯示

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

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

.div
注意點: 

1 標準文件流是相對於乙個容器來說的, 每乙個容器有自己的文件流, 我們只關心當前元素所在的文件流 

2 高度和寬度都設定為0後, 我們就可以認為此元素不再占用其父元素的標準文件流了, 但是這個容器仍然存在, 這個容器也存在乙個標準文件流, 供其子元素使用; 其子元素不會消失, 仍然會正常顯示, 但是不會占用其父元素所在的標準文件流( 即子元素顯示不會受其影響, 此元素占用文件流的大小也不會受其子元素的影響 )

6 設定元素透明度為 0

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

7 旋轉元素, 使與當前頁面垂直

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

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

div
注意點: 同上

9 其它 transform 使其假不可見

translatex()


translatey()


skew()

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

1 通過style屬性中的 display none display none這兩種方式的區別是 display 設定為 none之後,該元素不占用文件流 visibility 設定為 hidden之後,該元素仍然占用文件流,只不過是看不見了而已 2 通過style屬性中的 visibility h...

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

1 通過style屬性中的display none 2 通過style屬性中的visibility hidden 這兩種方式的區別是 display 設定為 none之後,該元素不占用文件流 visibility 設定為 hidden之後,該元素仍然占用文件流,只不過是看不見了而已。3 通過相對定位...

html中引入css的方式

html中引入css的方式 1.行內樣式 style屬性 2.內聯樣式 style標籤 3.外部引入 建立.css為字尾名的檔案 link標籤 import url 不建議使用 link和 import的區別 1 所屬範圍 import 是css的語法，只能匯入樣式 link是html的標籤，不僅可...