一.css的4种隐藏方式方式有哪些?
1.overflow:hidden;
2.visibility: hidden;
3.dispaly: none;
4. opacity:0;
二.这4种隐藏方式的区别是什么?
div{
width: 100px;
height: 100px;
background-color: #0A80B9;
}
<div>
这是css的四种隐藏方式以及他们之间的区别。这是css的四种隐藏方式以及他们之间的区别。
</div>
1.overflow: hidden; 溢出隐藏。溢出部分不占据位置。
div{
width: 100px;
height: 100px;
background-color: #0A80B9;
overflow: hidden;
}
- visibility: hidden; 隐藏了元素位置,但是还是占据位置。无法响应点击事件。虽然隐藏了元素,但是DOM还是在,不会引起重排,但是会引起重绘。
div{
width: 100px;
height: 100px;
background-color: #0A80B9;
visibility: hidden;
}
3.dispaly: none;隐藏元素,彻底消失,不占据位置,会引起重排和重排
div{
width: 100px;
height: 100px;
background-color: #0A80B9;
display: none;
}
- opacity:0; 将透明度设置为0,也可以达到隐藏元素的效果。占据位置,不会引发重排,但是会引发重绘。
div{
width: 100px;
height: 100px;
background-color: #0A80B9;
opacity: 0;
}