資訊專欄INFORMATION COLUMN
摘要：本文旨在加深對隱藏元素方法的理解，資料均來源于網絡，文章結尾附有參考鏈接。如果祖先元素設置了該樣式，該元素及其子孫元素都將隱藏，并且沒有其它讓其子孫元素恢復顯示的辦法。四和組合溢出隱藏，也就是說盒子以外的元素都會隱藏掉。
本文旨在加深對css隱藏元素方法的理解，資料均來源于網絡，文章結尾附有參考鏈接。
一、CSS中隱藏元素的常用方法有以下幾種：1. {display: none; //不占據空間，無法點擊}
2. {visibility: hidden; //占據空間，無法點擊}
3. {height: 0; overflow: hidden; //不占據空間，無法點擊}
4. {opacity:0; filter:alpha(opacity=0); //占據空間，可以點擊}
二、display：none和visibility：hidden的區別
主要有以下三點：
空間占據
reflow和repaint
株連性
1. 空間占據display：none 隱藏的元素不占據任何空間
visibility：hidden 隱藏的元素占據空間
注意 不管用何種方式，HTML里的元素都在打開網頁時一并加載，但是表現的時候用 CSS 來控制你是否能看得到。
2. reflow和repaint `display:none` 會引起`reflow`和`repaint`
`visibility:hidden` 不會引發`reflow`，但是會引起`repaint`，引發的`repaint`較小
注關于repaint與reflow會另外總結
3. 株連性株連性：如果祖先元素遭殃了，其子孫元素也無一例免的都將遭殃。
display：none 如果祖先元素設置了該樣式，該元素及其子孫元素都將隱藏，并且沒有其它讓其子孫元素恢復顯示的辦法。
visibility：hidden 如果祖先元素設置了該樣式，該元素及其子孫元素都將隱藏，但是給其子孫元素設置 visibility：visible樣式，仍然可以讓該子孫元素恢復顯示。
利用visibility的非株連性讓父元素隱藏，而子元素顯示
場景分析：
要讓父標簽的圓角、投影、背景等什么的都隱掉，只留里面的文本框。該怎么實現？如果是要display:none，則里面的文本框框也會被一并抹殺掉的，如果是要腳本控制style，需要修改太多的樣式。毋庸置疑，這里使用visibility控制是最高效也是最巧妙的方法。
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）規定，當一個塊元素容器的內容溢出其盒子模型的邊界時，溢出的內容是否隱藏取決于溢出內容的包含塊，如果溢出元素（內容，即塊元素容器的子孫元素）的包含塊是該塊元素容器（即用overflow樣式的元素）的祖先元素，則該溢出元素將不隱藏。
包含塊：一個絕對定位的元素，其包含塊是最近的擁有非static定位屬性的祖先元素，如果任何一級祖先元素都不符合，則其包含塊是body元素。
參考：
1、您可能不知道的CSS元素隱藏“失效”以其妙用
2、CSS display:none和visibility:hidden的區別
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115178.html
摘要：應用場景用戶上傳頭像，實時顯示并裁減實現方式模塊外部容器設置，剪裁區域里面放一個加載效果，設置。圖片尺寸獲取成功后，再正常初始化，然后讓外部容器屬性重置為。這樣體驗就會好很多，用戶只會看到加載中剪裁界面，而不是占位界面加載中最終操作界面。 一、Display 幾種隱藏方式 1、希望元素不可見、不占據空間、輔助設備無法訪問、不渲染 使用標簽：
摘要：使用這種方法來隱藏元素，是否可以觸發事件要根據具體的情況來分析。其他的方式只作了解即可，并不推薦使用它們來隱藏元素，它們的真正用途應該不在隱藏元素，而是通過了解這些方法的特點，挖掘出其真正的使用場景 幾種方法的簡單介紹 display:none 最常用的隱藏元素的方法 .hidden{ display:none } 將元素設置為display:none后，元素在頁面上將徹底...
摘要：目前在前端開發所占的比重越來越高，在我們學習和開發的過程中都會去使用。下面把程序員雷雪松對的知識點總結和歸納分享給大家。過濾對同胞元素的搜索。將匹配元素集合縮減為集合中的最后一個元素。返回指定元素相對于其他指定元素的位置。 jQuery目前在Web前端開發所占的比重越來越高，在我們jQuery學習和開發的過程中都會去使用。jQuery幫我們解決了瀏覽器之間JS一些不兼容的地方和簡化了原...
摘要：也就是說，較寬的外邊距決定兩個元素最終離多遠。盒模型結論二沒有設定屬性的元素始終會擴展到填滿其父元素的寬度為止。布局的基本概念多欄布局有三種基本的實現方案固定寬度流動彈性。 為文檔添加樣式的三種方法 行內樣式 行內樣式是寫在HTML標簽的style屬性里的，比如： Hello Everyone! 行內樣式會覆蓋嵌入樣式和鏈接樣式。 嵌入樣式 嵌入的css樣式是放在HTML文檔...
摘要：使用解除坍塌觸發可以使用解除坍塌，坍塌是不分父的高度是否固定的。解除坍塌添加外邊距效果浮動的不會坍塌。它還額外肩負了解除坍塌的重任。 overflow:hidden 的主要功能有三個： 隱藏溢出 清除浮動 解除坍塌 下面用例子來加深理解： 初始html內容： Document 初始css樣式： .container{ ...
閱讀 1652·2021-09-26 09:55
閱讀 1385·2021-09-23 11:22
閱讀 2746·2021-09-06 15:02
閱讀 2656·2021-09-01 11:43
閱讀 3976·2021-08-27 13:10
閱讀 3690·2021-08-12 13:24
閱讀 2080·2019-08-30 12:56
閱讀 3008·2019-08-30 11:22
