display和visibility的區別

2021-08-28 03:16:14 字數 427 閱讀 1447

做前端快一年了,竟然對css的visibility一點印象都沒有,今天總結一下兩者的區別:

1.display:none是徹底消失,不在文件流中佔位,瀏覽器也不會解析該元素;visibility:hidden是視覺上消失了,可以理解為透明度為0的效果,在文件流中佔位,瀏覽器會解析該元素;

2.使用visibility:hidden比display:none效能上要好,display:none切換顯示時visibility,頁面產生回流(當頁面中的一部分元素需要改變規模尺寸、布局、顯示隱藏等,頁面重新構建,此時就是回流。所有頁面第一次載入時需要產生一次回流),而visibility切換是否顯示時則不會引起回流。

除去對效能的考慮,二者的區別就是乙個在文件流中佔位置,乙個不會佔

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