display和visibility的區別

2022-05-14 07:09:55 字數 1169 閱讀 5079

visibility隱藏的物件還保留物件顯示時所佔的物理空間,display則不保留。

vilibility:hidden(隱藏)、visible(顯示) style="vislbility:hidden"

display:none(隱藏)、block(顯示) style="display:none"

可以儲存下面的**看看效果:

具體步驟:

**示例:

< div style="border:1px solid #000;background:#eee">

< span style="width:200;height:200;visibility:hidden">

←ss屬性為visibility:hidden的物件

< /div>

< div style="border:1px solid #000;background:#666">

< span style="width:200;height:200;display:none">

←ss屬性為display:none的物件

< /div>

特別提示

用visibility屬性控制隱藏的物件還佔據著它顯示時的位置,而display則沒有。

特別說明

display屬性設定元素的顯示方式,對應指令碼特性為display,可選值為none、block和inline,各值的說明如下:

none 隱藏元素,不保留元素顯示時的空間。

block塊方式顯示元素。

inline 以內嵌方式顯示元素。

inline-block物件顯示為內嵌元素,但所有子物件都顯示為塊元素,相鄰的內嵌元素將顯示在同一行,允許空格。

list-item 將塊元素顯示為列表物件,並可以新增專案標點。(需要ie6.0+支援)

table-header-group 將元素作為**標題組顯示,相當於thead元素。

table-footer-group 將元素作為**腳注組顯示,相當於tfoot元素。

visibility屬性設定是否顯示元素,對應的指令碼特性為visibility,可選值為inherit、hidden和visible,各值的說明如下:

inherit 繼承父元素的visibility屬性設定。

hidden 隱藏元素,但保留其所佔空間。

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...