原標題：Web前端：CSS3——3種隱藏元素方法的區別

Web前端教程

CSS3規范的一個新特點是被分為若干個相互獨立的模塊。一方面分成若干較小的模塊較利于規范及時更新和發布，及時調整模塊的內容，這些模塊獨立實現和發布，也為日后CSS的擴展奠定了基礎。另外一方面，由于受支持設備和瀏覽器廠商的限制，沒備或者廠商可以有選擇的支持一部分模塊，支持css3的一個子集，這樣有利于CSS3的推廣。

CSS3--3種隱藏元素方法的區別

display:none

1DOM結構:瀏覽器不會渲染display:none的元素,并且不占據頁面空間

2事件監聽:無法對元素進行事件監聽

3繼承:不會被子元素繼承(子元素設置display:block不會顯示)

4改動:改動屬性值會引起頁面的重排和重繪

5過渡:無法設置過渡效果transition:display無效

visibility:hidden

1不會被渲染,但是會占據頁面空間

2無法對元素設置事件監聽

3可以繼承,子元素設置非visibility:hidden可以顯示

4改動屬性只會引起頁面重排

5transition:visibility會立即顯示,hidden有過渡效果

opacity:0

1元素被隱藏,會占據頁面空間

2可以設置事件監聽

3可以繼承,子元素設置opacity可以顯示

4不會重繪也不會重排

5transition:opacity可以實現顯示隱藏的過渡效果

6opacity會觸發硬件加速

CSS3編程工具同CSS，任何一種文本編輯工具都可用來編寫，如:Windows下的寫字本、記事本;或其他專門用于編輯網頁文本的工具，如:IntelliJIDEA、Eclipse、MyEclipse、webstorm、sublimetext;此外還有專門針對前端開發的插件，如:Emmet。返回搜狐，查看更多

責任編輯：

總結

以上是生活随笔為你收集整理的html隐藏元素的方式,Web前端：CSS3——3种隐藏元素方法的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。