CSS中visibility:hidden、display:none、opacity:0、rgba設(shè)置元素隱藏的區(qū)別

共同點(diǎn):
visibility:hidden、display:none、opacity:0三者都可以使元素隱藏
區(qū)別在于:
1、visibility:hidden 保留dom節(jié)點(diǎn),元素在文檔流中占據(jù)空間,不引起重排和回流;父元素設(shè)置該屬性時(shí),子元素同樣會(huì)生效,但可以通過visibility:visible;修改子元素的顯示效果;
2、display:none 不保留dom節(jié)點(diǎn),元素直接從文檔流中刪除,引起重排和回流,子元素同樣被刪除;
3、opacity:0 設(shè)置元素透明度為0,保留dom節(jié)點(diǎn),元素在文檔流中占據(jù)空間,子元素會(huì)繼承父元素的opacity特性,但是子元素設(shè)置opacity:1;同樣不會(huì)顯示出來。
4、通過給元素設(shè)置rgba(x,x,x,0)為透明隱藏效果,但仍然會(huì)占據(jù)一片空間,且子元素不會(huì)受到影響
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .father1{ height: 200px; width: 200px; background-color: #aabbcc; margin-top:20px; display: none; } .son1{ height: 100px; width: 100px; background-color: #eeaaee; display: block; } .father2{ opacity: 0; height: 200px; width: 200px; background-color: #aabbcc; margin-top:20px; opacity: 0; } .son2{ height: 100px; width: 100px; background-color: #eeaaee; opacity: 1; } .father3{ visibility: hidden; height: 200px; width: 200px; background-color: #aabbcc; margin-top:20px; visibility: hidden; } .son3{ height: 100px; width: 100px; background-color: #eeaaee; visibility: visible; } </style> </head> <body> <div class="father1"> <div class="son1"></div> </div> <div class="father2"> <div class="son2"></div> </div> <div class="father3"> <div class="son3"></div> </div> <script></script> </body> </html>
到此這篇關(guān)于CSS中visibility:hidden、display:none、opacity:0、rgba設(shè)置元素隱藏的區(qū)別的文章就介紹到這了,更多相關(guān)CSS visibility:hidden、display:none、opacity:0、rgba內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
css之Display、Visibility、Opacity、rgba和z-index: -1的區(qū)別
這篇文章主要介紹了css之Display、Visibility 和 Opacity 的區(qū)別,方便我們后期根據(jù)需要選擇,需要的朋友可以參考下2020-11-07CSS 中的 display、visibility,和opacity 的區(qū)別解析
display 主要影響元素在布局中的顯示方式,可以完全隱藏元素并且不占據(jù)空間;visibility 控制元素的可見性,隱藏元素時(shí)仍然占據(jù)空間;opacity 控制元素的透明度,改變元素2023-11-07