## opacity/visibility/display 隱藏對比 opacity 用來設置透明度 display 定義建立布局時元素生成的顯示框類型 visibility 用來設置元素是否可見。 opacity、visibility、display 這三個屬性分別取值 0、hidden、none 都能使元素在頁面上看不見，但是他們在方方面面都還是有區別的。  1、**display:none** （1）、瀏覽器不會生成屬性為display: none;的元素。 （2）、display: none;不占據空間，把元素隱藏起來，所以動態改變此屬性時會引起重排（改變頁面布局），可以理解成在頁面中把該元素刪除掉一樣。 （3）、display: none;不會被子孫繼承，但是其子孫是不會顯示的，畢竟都一起被隱藏了。 （4）、transition無效。 2、**visibility:hidden** （1）、元素會被隱藏，但是不會消失，依然占據空間，隱藏后不會改變html原有樣式。 （2）、visibility: hidden會被子孫繼承，子孫也可以通過顯示的設置visibility: visible;來反隱藏。 （3）、visibility: hidden;不會觸發該元素已經綁定的事件。 （4）、visibility: hidden;動態修改此屬性會引起重繪。 （5）、transition無效。 3、**opacity:0;filter：alpha(opacity=0-100;**（考慮瀏覽器兼容性的問題，最好兩個都寫上） （1）、opacity:0;filter：alpha(opacity=0-100;只是透明度為100%,元素隱藏，依然占據空間,隱藏后不會改變html原有樣式。 （2）、opacity:0;filter：alpha(opacity=0-100;會被子元素繼承,且子元素并不能通過opacity=1，進行反隱藏。 （3）、opacity:0;filter：alpha(opacity=0-100;的元素依然能觸發已經綁定的事件。 （4）、transition有效。