visibility與display的區別

2021-09-07 23:25:54 字數 1163 閱讀 4485

visibility與display之設定元素顯隱的區別

在css裡的visibility 屬性,通常其值被設定成visible 或hidden。

visibility:hidden 相當於display:none,能把元素隱藏起來,但是兩者的區別在於:

display:none 不顯示對應的元素,在文件布局中不再分配空間(回流+重繪)

visibility:hidden 隱藏對應元素,在文件布局中仍保留原來的空間(重繪)

例項css:

沒有設定時效果:

設定visibility:hidden後效果:

設定display:none後效果:

visibility和display兩個屬性都有隱藏元素的功能。

對乙個元素而言,如果 display 設定其值為 none 則該元素以及所有後代元素都隱藏。

​ 在 firefox瀏覽器下,display:none的元素的background-image是不會載入的,包括父元素display:none也是如此;然而在chrome和safari瀏覽器則不同,若父元素display:none,不會載入,若是自身背景圖所在元素隱藏,則依舊會去載入;對ie瀏覽器而言,不管怎樣都會請求資源。

visibility 的繼承性

如果父元素設定 visibility:hidden,子元素也會看不見,究其原因是繼承性,子元素繼承visibility:hidden,但是,如果子元素設定了 visibility:visible,則子元素又會顯示出來。這個和 display 隱藏有著質的區別。

visibility支援的屬性值還有乙個collapsecollapse;

當設定元素visibility:collapse後,對於普通元素,其表現等同於 visibility:hidden ,也即其會占用空間。

display與visibility的使用 區別

display none 隱藏元素,且此元素無物理位置 visibility hidden 隱藏元素,但元素的物理位置依然存在 因為display none導致頁面上無此元素的空間,js就獲取不到此元素的資訊,此時應用visibility hidden來代替display none display ...

Matlab基本函式 disp函式

1 disp函式 顯示文字或陣列 2 用法說明 disp x 函式顯示指定的文字或陣列。如果參量是陣列,則顯示陣列的內容 如果參量是字串,則顯示字串文字的內容 3 例項 1 參量是字串 x hello,world x hello,world disp x hello,world 2 參量是陣列或矩陣...

matlab中disp的用法

disp x 顯示乙個陣列時不需要輸出它的名稱。如果x包含乙個文字字串,則顯示字串。另一種在電腦螢幕上顯示陣列的方法是輸出陣列的名稱,但在輸出結果之前還有乙個抬頭,通常是不需要的。disp函式僅接受乙個輸入。為了顯示多於乙個陣列和字串,需要將函式sprintf或fprintf串聯起來。注意disp不...