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

2021-10-18 03:51:21 字數 1114 閱讀 3019

1、 通過style屬性中的 display : none

display


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

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

2 、通過style屬性中的 visibility : hidden

visibility


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

div
但是要記住:

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

.div
注意點:

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

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

.div
注意點:

6 、設定元素透明度為 0

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

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

div
注意點:

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

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

div
注意點: 同上

9 、其它 transform 使其假不可見

translatex()


translatey()


skew


()

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

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

HTML中通過CSS方式隱藏元素

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

關聯中9種設定方式

來了，老弟 之前在設定引數化的時候搞不懂好多裡面的設定，都是老師傅帶的好，讓怎麼搞就怎麼搞，沒有靈魂的程式設計師 私下自己也在琢磨了好久，終於鬧明白了，就和大家分享下 sequential ench iteration 順序方式 每次迭代更新取值，設定迭代次數，每次迭代使用同一行資料，資料按照順序讀...