display和visibility的區別

2021-08-08 20:24:17 字數 812 閱讀 9216

display通常可以設定為none、inline、block

visibility通常可以設定為hidden、visible;

display的顯示和隱藏在前端用的很多,這樣他可以減少頁面的空間的使用了,不占用原來的頁面的空間,比如說彈框等。並且diplay inline可以改變標籤的屬性,行級標籤改變成塊級標籤或者行塊都可以。

visibility使用後隱藏後的元素還占用原來的頁面的空間。在我們製作頁面可以說基本不常用。

下面我們看下例子:

id="mydiv"

style="width:100px;border:1px solid #aaa;">

ssssssssss

p>

div>

type="button"

onclick="isvisibility(document.getelementbyid('mydiv'))"

value="是否可見visibility" />

type="button"

onclick="isdisplay(document.getelementbyid('mydiv'))"

value="是否可見display" />

function

isvisibility

(me)

else

}

function

isdisplay

(me)

else

}

script>

希望讀者複製到編輯後自己體會下他的用法。

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