資訊專欄INFORMATION COLUMN
摘要：說明用來設置透明度定義建立布局時元素生成的顯示框類型用來設置元素是否可見。總的來說，使用和屬性，自身的事件不會觸發，而使用屬性，自身綁定的事件還是會觸發的。
說明
opacity 用來設置透明度
display 定義建立布局時元素生成的顯示框類型
visibility 用來設置元素是否可見。
opacity、visibility、display 這三個屬性分別取值 0、hidden、none 都能使元素在頁面上看不見，但是他們在方方面面都還是有區別的。
舉個例子
最開始的樣子
黃色塊div元素 使用 opacity:0; 時
黃色塊div元素 使用 visibility:hidden; 時
黃色塊div元素 使用 display:none; 時
可以看出，使用 opacity 和 visibility 屬性時，元素還是會占據頁面空間的，而使用 display 屬性時，元素不占據頁面空間。
對子元素的影響如果子元素什么都不設置的話，都會受父元素的影響，和父元素的顯示效果一樣，我們就來舉例看看，如果子元素設置的值 和 父元素設置的值不同會有什么效果。
例子 （opacity屬性）
例子 （visibility屬性）
例子 （display屬性）
可以看出，使用 opacity 和 display 屬性時，父元素對子元素的影響很明顯，子元素設置的 opacity 和 display 屬性是不起作用的，顯示的效果和父元素一樣，而使用 visibility 屬性時，子元素如果設置為 visibility:visible; 并沒有受父元素的影響，可以繼續顯示出來。
自身綁定的事件是否能繼續觸發這里說的觸發事件，是指用戶人為的觸發的事件，不包括使用 JavaScript 模擬觸發的事件。
例子 （opacity屬性）
例子 （visibility屬性）
使用 display:none; 就不用舉例子了，因為使用 display 屬性的話，元素不僅看不見，而且也不占據頁面空間，所有不會觸發事件。
總的來說，使用 visibility 和 display 屬性，自身的事件不會觸發，而使用 opacity 屬性，自身綁定的事件還是會觸發的。
是否影響其他元素觸發事件例子（opacity屬性）
黃色塊div元素設置 opacity:0; ，通過定位，遮擋住了 藍色的p元素，當鼠標移到藍色p元素上時，并沒有觸發藍色p元素的事件。
例子（visibility屬性）
黃色塊div元素設置 visibility:hidden; ，通過定位，雖然遮擋住了 藍色的p元素，但是當鼠標移到藍色p元素上時，還是觸發了藍色p元素綁定的事件。
和上邊一樣，display 屬性就不舉例子了，因為他不會占據頁面空間，也就不會遮擋其他元素，就不會影響其他元素觸發事件了。
所以，visibility 和 display 屬性是不會影響其他元素觸發事件的，而 opacity 屬性 如果遮擋住其他元素，其他的元素就不會觸發事件了。
回流
當頁面中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流(也有人會把回流叫做是重布局或者重排)。
每個頁面至少需要一次回流，就是在頁面第一次加載的時候。
dispaly 屬性會產生回流，而 opacity 和 visibility 屬性不會產生回流。
是否產生重繪（repaint）重繪
當頁面中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的時候，比如background-color。則稱為重繪。
dispaly 和 visibility 屬性會產生重繪，而 opacity 屬性不一定會產生重繪。
元素提升為合成層后，transform 和 opacity 不會觸發 repaint，如果不是合成層，則其依然會觸發 repaint。
在 Blink 和 WebKit 內核的瀏覽器中，對于應用了 transition 或者 animation 的 opacity 元素，瀏覽器會將渲染層提升為合成層。
也可以使用 translateZ(0) 或者 translate3d(0,0,0) 來人為地強制性地創建一個合成層。
舉個例子
重繪 repaint
我們可以用 Chrome DevTools 的 Rendering 來看看，
先打開 Rendering
把第一個選項勾選，這個選項會 高亮顯示需要重繪的區域。
看看效果
改改代碼，增加上個 transition
重繪 repaint
再看看效果
加上 transition 后就沒有 高亮顯示了，這時候 opacity 不會觸發重繪。
實際上透明度改變后，GPU 在繪畫時只是簡單的降低之前已經畫好的紋理的 alpha 值來達到效果，并不需要整體的重繪。不過這個前提是這個被修改的 opacity 本身必須是一個圖層，如果圖層下還有其他節點，GPU 也會將他們透明化。
注意：回流必將引起重繪，而重繪不一定會引起回流。
是否支持transitionopacity 是支持 transition的，一般淡入淡出的效果就是這樣實現的。
visibility 也是支持 transition 的。
visibility: 離散步驟，在0到1數字范圍之內，0表示“隱藏”，1表示完全“顯示”
visibility : hidden; 可以看成 visibility : 0;
visibility : visible; 可以看成 visibility : 1;
只要 visibility 的值大于0就是顯示的，所以
visibility:visible 過渡到 visibility:hidden，看上去不是平滑的過渡，而是進行了一個延時。
而如果 visibility:hidden 過渡到 visibility:visible ，則是立即顯示，沒有延時。
注意
上面這個例子只能是從 visibility:visible 過渡到 visibility:hidden，不能從 visibility:hidden 過渡到 visibility:visible 。
當元素是 visibility:hidden; 時，自身的事件不會觸發，所以像上面這個例子中，直接在藍色塊div元素 上加 hover 事件，要去將自身的 visibility:hidden 過渡到 visibility:visible 是不會起作用的。
但是在其他元素上加事件，來將該元素的 visibility:hidden 過渡到 visibility:visible 是可以的，看例子。
display 不僅不支持transition，它還會使 transition 失效。舉個例子看看
可以看出用了display，支持 transition 的 opacity 屬性也沒起作用。
這是因為display:none; 的元素，是不會渲染在頁面上的，而 transition 要起作用，元素必須是已經渲染在頁面上的元素，我們可以再來看個例子
渲染到頁面
給 span 元素綁定事件，點擊它的時候，才會把黃色塊div元素，渲染到DOM樹上，然后改變黃色塊div元素的 opacity 屬性，opacity 是支持 transition 的，而在這段代碼中，并沒有起作用。
更詳細的關于 transition 是否成功 的解讀看這里
渲染樹決定 transtion 能否成功
要想解決這個問題，我們可以這樣做。
1、把 display 屬性換成 visibility 屬性
2、如果必須要用 display 屬性，我們可以加上定時器來解決這個問題
總結
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113407.html
摘要：說明用來設置透明度定義建立布局時元素生成的顯示框類型用來設置元素是否可見。總的來說，使用和屬性，自身的事件不會觸發，而使用屬性，自身綁定的事件還是會觸發的。 說明 opacity 用來設置透明度 display 定義建立布局時元素生成的顯示框類型 visibility 用來設置元素是否可見。 opacity、visibility、display 這三個屬性分別取值 0...
摘要：元素層疊順序補充說明位于最下面的特指層疊上下文元素后面會詳解的邊框和背景色。界中可能有其他的層疊結界，而自身也可能處于其他層疊結界中。 上一篇：《CSS世界》筆記四：流的保護與破壞 寫在前面 《CSS世界》這本書還剩六章，但是這本書的精華部分主要是前面的內容，這里僅把后面章節相對重要的內容以博客展示，想著了解更多的小伙伴還是去閱讀原文的好，畢竟三百多頁的一本書并不是小小幾篇博客能完全說...
摘要：使用這種方法來隱藏元素，是否可以觸發事件要根據具體的情況來分析。其他的方式只作了解即可，并不推薦使用它們來隱藏元素，它們的真正用途應該不在隱藏元素，而是通過了解這些方法的特點，挖掘出其真正的使用場景 幾種方法的簡單介紹 display:none 最常用的隱藏元素的方法 .hidden{ display:none } 將元素設置為display:none后，元素在頁面上將徹底...
摘要：本文旨在加深對隱藏元素方法的理解，資料均來源于網絡，文章結尾附有參考鏈接。如果祖先元素設置了該樣式，該元素及其子孫元素都將隱藏，并且沒有其它讓其子孫元素恢復顯示的辦法。四和組合溢出隱藏，也就是說盒子以外的元素都會隱藏掉。 本文旨在加深對css隱藏元素方法的理解，資料均來源于網絡，文章結尾附有參考鏈接。 一、CSS中隱藏元素的常用方法有以下幾種： 1. {display: none; /...
閱讀 2986·2020-01-08 12:17
閱讀 1990·2019-08-30 15:54
閱讀 1151·2019-08-30 15:52
閱讀 2033·2019-08-29 17:18
閱讀 1042·2019-08-29 15:34
閱讀 2459·2019-08-27 10:58
閱讀 1860·2019-08-26 12:24
閱讀 368·2019-08-23 18:23
