CSS中visibility:hidden、display:none、opacity:0、rgba设置元素隐藏的区别
共同點(diǎn)：
visibility:hidden、display:none、opacity:0三者都可以使元素隱藏
區(qū)別在于：
1、visibility:hidden 保留dom節(jié)點(diǎn)，元素在文檔流中占據(jù)空間，不引起重排和回流；父元素設(shè)置該屬性時(shí)，子元素同樣會(huì)生效，但可以通過(guò)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ì)顯示出來(lái)。
4、通過(guò)給元素設(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>
<p class="cd78-a4db-a131-1f60 father1">
<p class="a4db-a131-1f60-a67c son1"></p>
</p>
<p class="a131-1f60-a67c-2cc3 father2">
<p class="1f60-a67c-2cc3-d46f son2"></p>
</p>
<p class="b05b-e0b3-5354-f952 father3">
<p class="e0b3-5354-f952-8fd7 son3"></p>
</p>
<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)文章，希望大家以后多多支持腳本之家！
總結(jié)
以上是生活随笔為你收集整理的CSS中visibility:hidden、display:none、opacity:0、rgba设置元素隐藏的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS微信键盘1.0.8测试版更新，多个
- 下一篇： CSS处理文字段落尾行行末缩进，点击查看