成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS的隱藏方式

URLOS / 419人閱讀

display:none和visibility:hidden的區(qū)別 
// 1、空間占據(jù)
display:none;// 隱藏的元素不占文檔流
visibility:hidden;// 隱藏的元素空間存在(占茅坑、不拉屎)
// 2、回流和重繪(reflow/repaint)
display:none;// 引發(fā)回流和重繪
visibility:hidden;// 無回流和重繪
// 3、株連九族
display:none;// 其內(nèi)的標(biāo)簽元素全部隱藏、無論如何掙扎都無濟(jì)于事
visibility:hidden;// 其元素若添加visibility:visible;則會顯示出來
height:0;overflow:hidden; 
overflow:hidden;// 溢出隱藏
//若父級被添加了position屬性、子級內(nèi)添加了絕對定位、則不會被隱藏
//火星人在地球觸發(fā)了法律，如果火星人的老爸在這法律之外，則這個火星人啥事沒有；否則，坐牢！
position:absolute;top:-999em;// 不占空間、無法點(diǎn)擊
position:relative;top:-999em;// 占空間、無法點(diǎn)擊
position:absolute;visibility:hidden;// 不占空間、無法點(diǎn)擊
opacity:0;filter:Alpha(opacity=0);// 占空間、可以點(diǎn)擊
那些原因引起瀏覽器的回流

改變字體大小

樣式表改動

DOM操作

CSS偽類

元素內(nèi)容變化、尤其是輸入控件

調(diào)整窗口大小( resize )

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

會使瀏覽器將漸進(jìn)回流隊列Flush、立即執(zhí)行回流
如何減少頁面回流

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

避免循環(huán)操作DOM、創(chuàng)建一個documentFragment或div在上面應(yīng)用所有DOM操作、最后在添加到指定的元素中

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111145.html

相關(guān)文章

  • CSS中隱藏元素的幾種方法

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

    vvpvvp 評論0 收藏0

  • 【CSS】CSS 世界 -- 元素的顯示與隱藏學(xué)習(xí)總結(jié)

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

    wyk1184 評論0 收藏0

  • CSS的隱藏方式

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

    afishhhhh 評論0 收藏0

  • 【CSS】隱藏元素總結(jié)

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

    testbird 評論0 收藏0

  • jQuery的show/hide性能測試

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

    canger 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<