CSS的隱藏方式

afishhhhh 發布于2019-08-01 14:51 / 2567人閱讀

display:none和visibility:hidden的區別

// 1、空間占據
display:none;// 隱藏的元素不占文檔流
visibility:hidden;// 隱藏的元素空間存在(占茅坑、不拉屎)
// 2、回流和重繪(reflow/repaint)
display:none;// 引發回流和重繪
visibility:hidden;// 無回流和重繪
// 3、株連九族
display:none;// 其內的標簽元素全部隱藏、無論如何掙扎都無濟于事
visibility:hidden;// 其元素若添加visibility:visible;則會顯示出來

height:0;overflow:hidden;

overflow:hidden;// 溢出隱藏
//若父級被添加了position屬性、子級內添加了絕對定位、則不會被隱藏
//火星人在地球觸發了法律，如果火星人的老爸在這法律之外，則這個火星人啥事沒有；否則，坐牢！

position:absolute;top:-999em;// 不占空間、無法點擊
position:relative;top:-999em;// 占空間、無法點擊
position:absolute;visibility:hidden;// 不占空間、無法點擊
opacity:0;filter:Alpha(opacity=0);// 占空間、可以點擊

那些原因引起瀏覽器的回流

改變字體大小

樣式表改動

DOM操作

CSS偽類

元素內容變化、尤其是輸入控件

調整窗口大小( resize )

width、clientWidth(內容可視區大小)、offsetWidth(border+clientWidth)、scrollTop/scrollHeight(元素內容高度/包括溢出內容)

會使瀏覽器將漸進回流隊列Flush、立即執行回流
如何減少頁面回流

避免逐項更改樣式、最好一次性更改style屬性cssText、或者定義class一次性添加className

避免循環操作DOM、創建一個documentFragment或div在上面應用所有DOM操作、最后在添加到指定的元素中

也可以在一個display:none;的元素上進行操作、因為display:none;上的DOM操作不會引發回流(reflow)和重繪(repaints)

避免循環讀取offsetLeft等屬性、在循環之前把他們存儲起來

進行復雜動畫的元素運動時、使用絕對定位、使其脫離文檔流。
否則會引起父元素以及后續元素大量的回流

云服務器 GPU云服務器隱藏聯系方式 html css隱藏 css引入方式 html按鈕的隱藏

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49624.html

CSS中隱藏元素的幾種方法

摘要：使用這種方法來隱藏元素，是否可以觸發事件要根據具體的情況來分析。其他的方式只作了解即可，并不推薦使用它們來隱藏元素，它們的真正用途應該不在隱藏元素，而是通過了解這些方法的特點，挖掘出其真正的使用場景幾種方法的簡單介紹 display:none 最常用的隱藏元素的方法 .hidden{ display:none } 將元素設置為display:none后，元素在頁面上將徹底...

vvpvvp 2019-08-29 11:33 評論0 收藏0
【CSS】CSS 世界 -- 元素的顯示與隱藏學習總結

摘要：應用場景用戶上傳頭像，實時顯示并裁減實現方式模塊外部容器設置，剪裁區域里面放一個加載效果，設置。圖片尺寸獲取成功后，再正常初始化，然后讓外部容器屬性重置為。這樣體驗就會好很多，用戶只會看到加載中剪裁界面，而不是占位界面加載中最終操作界面。一、Display 幾種隱藏方式 1、希望元素不可見、不占據空間、輔助設備無法訪問、不渲染使用標簽：

wyk1184 2019-08-29 17:20 評論0 收藏0
CSS的隱藏方式

display:none和visibility:hidden的區別 // 1、空間占據 display:none;// 隱藏的元素不占文檔流 visibility:hidden;// 隱藏的元素空間存在(占茅坑、不拉屎) // 2、回流和重繪(reflow/repaint) display:none;// 引發回流和重繪 visibility:hidden;// 無回流和重繪 // 3、株連九族 ...

URLOS 2019-08-28 18:17 評論0 收藏0
【CSS】隱藏元素總結

摘要：本文旨在加深對隱藏元素方法的理解，資料均來源于網絡，文章結尾附有參考鏈接。如果祖先元素設置了該樣式，該元素及其子孫元素都將隱藏，并且沒有其它讓其子孫元素恢復顯示的辦法。四和組合溢出隱藏，也就是說盒子以外的元素都會隱藏掉。本文旨在加深對css隱藏元素方法的理解，資料均來源于網絡，文章結尾附有參考鏈接。一、CSS中隱藏元素的常用方法有以下幾種： 1. {display: none; /...

testbird 2019-08-30 12:56 評論0 收藏0
jQuery的show/hide性能測試

摘要：原文地址這篇文章是各種方式的性能測試。但由于未能找問明原因，所以作者就自己去做了這個測試。主要原因在于方法必須先保存元素的屬性，這樣才能把元素恢復到原來的狀態。根據源代碼上的注釋，這樣做是為了防止瀏覽器在每個循環上進行重新渲染。原文地址：http://www.php100.com/html/webkaifa/javascript/2012/0927/11164.html 這篇文章是j...

canger 2019-08-19 18:38 評論0 收藏0