display和visibility的區別

2021-09-10 23:51:20 字數 1067 閱讀 8415

採用css實現元素隱藏的方法有很多種,比如定位到螢幕之外、透明度變換等。而常見的兩種方式是將元素設定為display:none或者visibility:hidden。

元素樣式設定為display:none

當元素樣式設定為display:none時,則該元素和它的子元素都會隱藏,不佔據文件流(就是元素原本佔據的空間會釋放出來)。

給元素樣式設定display:noneab

c

樣式設定為

.a,.b,.c
效果如:

新增display:none後效果如下:

b原本佔據的空間會釋放出來。

display的其他常見屬性值及說明

屬性值說明

block

元素轉化為塊級元素顯示

inline

元素轉化為行內元素顯示

inline-block

自身元素轉化為行內元素,相鄰的行內元素顯示在一行,但其子元素為塊級元素顯示

元素樣式設定為:visibility:hidden

visibility:hidden也可以將元素隱藏,但是依然顯示著元素所佔據的空間。如:

給元素樣式設定visibility:noneab

c

css樣式:

.a,.b,.c

.b

效果如下:

visibility的其他屬性值:

屬性值說明

inherit

繼承父元素的visibility屬性設定

visible

預設值

visibility和display的區別和用法

div的visibility可以控制div的顯示和隱藏,但是隱藏後頁面顯示空白 style visibility none document.getelementbyid typediv1 style.visibility hidden 隱藏 document.getelementbyid type...

display的block和inline屬性

block元素特點 1.處於常規流中時,如果width沒有設定,會自動填充滿父容器 2.可以應用margin padding 3.在沒有設定高度的情況下會擴充套件高度以包含常規流中的子元素 4.處於常規流中時布局時在前後元素位置之間 獨佔乙個水平空間 5.忽略vertical align inlin...

display和visibility的用法和區別

大多數人很容易將css屬性display和visibility混淆,它們看似沒有什麼不同,其實它們的差別卻是很大的。visibility和display兩個屬性都有隱藏元素的功能。visibility屬性所控制的元素雖然不在瀏覽器裡面顯示出來,但他在瀏覽區里是存在的,只是不顯示而已。而display...