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

資訊專欄INFORMATION COLUMN

CSS的隱藏方式

afishhhhh / 2604人閱讀

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

改變字體大小

樣式表改動(dòng)

DOM操作

CSS偽類

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

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

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

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

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

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

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

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

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

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

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

相關(guān)文章

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

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

    vvpvvp 評(píng)論0 收藏0

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

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

    wyk1184 評(píng)論0 收藏0

  • CSS的隱藏方式

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

    URLOS 評(píng)論0 收藏0

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

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

    testbird 評(píng)論0 收藏0

  • jQuery的show/hide性能測(cè)試

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

    canger 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<