CSS中visibility:hidden、display:none、opacity:0、rgba设置元素隐藏的区别
生活随笔
收集整理的這篇文章主要介紹了
CSS中visibility:hidden、display:none、opacity:0、rgba设置元素隐藏的区别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
共同點：
visibility:hidden、display:none、opacity:0三者都可以使元素隱藏
區別在于：
1、visibility:hidden 保留dom節點，元素在文檔流中占據空間，不引起重排和回流；父元素設置該屬性時，子元素同樣會生效，但可以通過visibility:visible;修改子元素的顯示效果；
2、display:none 不保留dom節點，元素直接從文檔流中刪除，引起重排和回流，子元素同樣被刪除；
3、opacity:0 設置元素透明度為0，保留dom節點，元素在文檔流中占據空間，子元素會繼承父元素的opacity特性，但是子元素設置opacity:1;同樣不會顯示出來。
4、通過給元素設置rgba(x,x,x,0)為透明隱藏效果，但仍然會占據一片空間，且子元素不會受到影響
<!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>
到此這篇關于CSS中visibility:hidden、display:none、opacity:0、rgba設置元素隱藏的區別的文章就介紹到這了,更多相關CSS visibility:hidden、display:none、opacity:0、rgba內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
總結
以上是生活随笔為你收集整理的CSS中visibility:hidden、display:none、opacity:0、rgba设置元素隐藏的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS微信键盘1.0.8测试版更新，多个
- 下一篇： CSS处理文字段落尾行行末缩进，点击查看