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

資訊專欄INFORMATION COLUMN

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

testbird / 2078人閱讀

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

本文旨在加深對css隱藏元素方法的理解，資料均來源于網(wǎng)絡(luò)，文章結(jié)尾附有參考鏈接。

一、CSS中隱藏元素的常用方法有以下幾種： 
1. {display: none; //不占據(jù)空間，無法點(diǎn)擊}
2. {visibility: hidden; //占據(jù)空間，無法點(diǎn)擊}
3. {height: 0; overflow: hidden; //不占據(jù)空間，無法點(diǎn)擊}
4. {opacity:0; filter:alpha(opacity=0); //占據(jù)空間，可以點(diǎn)擊}
二、display：none和visibility：hidden的區(qū)別 
    主要有以下三點(diǎn)：

空間占據(jù)

reflow和repaint

株連性

1. 空間占據(jù)

display：none 隱藏的元素不占據(jù)任何空間
visibility：hidden 隱藏的元素占據(jù)空間

注意 不管用何種方式，HTML里的元素都在打開網(wǎng)頁時(shí)一并加載，但是表現(xiàn)的時(shí)候用 CSS 來控制你是否能看得到。

2. reflow和repaint 
    `display:none` 會引起`reflow`和`repaint`
    `visibility:hidden` 不會引發(fā)`reflow`，但是會引起`repaint`，引發(fā)的`repaint`較小

注關(guān)于repaint與reflow會另外總結(jié)

3. 株連性

株連性：如果祖先元素遭殃了，其子孫元素也無一例免的都將遭殃。

display：none 如果祖先元素設(shè)置了該樣式，該元素及其子孫元素都將隱藏，并且沒有其它讓其子孫元素恢復(fù)顯示的辦法。
visibility：hidden 如果祖先元素設(shè)置了該樣式，該元素及其子孫元素都將隱藏，但是給其子孫元素設(shè)置 visibility：visible樣式，仍然可以讓該子孫元素恢復(fù)顯示。

三、visibility失效的妙用

利用visibility的非株連性讓父元素隱藏，而子元素顯示

場景分析：
要讓父標(biāo)簽的圓角、投影、背景等什么的都隱掉，只留里面的文本框。該怎么實(shí)現(xiàn)？如果是要display:none，則里面的文本框框也會被一并抹殺掉的，如果是要腳本控制style，需要修改太多的樣式。毋庸置疑，這里使用visibility控制是最高效也是最巧妙的方法。

四、height：0和overflow：hidden組合

overflow:溢出隱藏，也就是說盒子以外的元素都會隱藏掉。
但是，這里有例外的情況，先來看一下css2.1對overflow的解釋:

This property specifies whether content of a block container element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

此屬性（overflow）規(guī)定，當(dāng)一個(gè)塊元素容器的內(nèi)容溢出其盒子模型的邊界時(shí)，溢出的內(nèi)容是否隱藏取決于溢出內(nèi)容的包含塊，如果溢出元素（內(nèi)容，即塊元素容器的子孫元素）的包含塊是該塊元素容器（即用overflow樣式的元素）的祖先元素，則該溢出元素將不隱藏。

包含塊：一個(gè)絕對定位的元素，其包含塊是最近的擁有非static定位屬性的祖先元素，如果任何一級祖先元素都不符合，則其包含塊是body元素。

參考：
1、您可能不知道的CSS元素隱藏“失效”以其妙用
2、CSS display:none和visibility:hidden的區(qū)別

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

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

相關(guān)文章

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

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

    wyk1184 評論0 收藏0

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

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

    vvpvvp 評論0 收藏0

  • jQuery學(xué)習(xí)和知識點(diǎn)總結(jié)歸納

    摘要：目前在前端開發(fā)所占的比重越來越高，在我們學(xué)習(xí)和開發(fā)的過程中都會去使用。下面把程序員雷雪松對的知識點(diǎn)總結(jié)和歸納分享給大家。過濾對同胞元素的搜索。將匹配元素集合縮減為集合中的最后一個(gè)元素。返回指定元素相對于其他指定元素的位置。 jQuery目前在Web前端開發(fā)所占的比重越來越高，在我們jQuery學(xué)習(xí)和開發(fā)的過程中都會去使用。jQuery幫我們解決了瀏覽器之間JS一些不兼容的地方和簡化了原...

    JohnLui 評論0 收藏0

  • css學(xué)習(xí)歸納總結(jié)（三）

    摘要：也就是說，較寬的外邊距決定兩個(gè)元素最終離多遠(yuǎn)。盒模型結(jié)論二沒有設(shè)定屬性的元素始終會擴(kuò)展到填滿其父元素的寬度為止。布局的基本概念多欄布局有三種基本的實(shí)現(xiàn)方案固定寬度流動彈性。 為文檔添加樣式的三種方法 行內(nèi)樣式 行內(nèi)樣式是寫在HTML標(biāo)簽的style屬性里的，比如： Hello Everyone! 行內(nèi)樣式會覆蓋嵌入樣式和鏈接樣式。 嵌入樣式 嵌入的css樣式是放在HTML文檔...

    Drummor 評論0 收藏0

  • CSS 深入理解：overflow: hidden——隱藏溢出、清除浮動、解除坍塌

    摘要：使用解除坍塌觸發(fā)可以使用解除坍塌，坍塌是不分父的高度是否固定的。解除坍塌添加外邊距效果浮動的不會坍塌。它還額外肩負(fù)了解除坍塌的重任。 overflow:hidden 的主要功能有三個(gè)： 隱藏溢出 清除浮動 解除坍塌 下面用例子來加深理解： 初始html內(nèi)容： Document 初始css樣式： .container{ ...

    WalkerXu 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<