css:4种隐藏方式_css隐藏类型

一.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
2
3
4
5
6
7
8

1.overflow: hidden; 溢出隐藏。溢出部分不占据位置。

    div{
        width: 100px;
        height: 100px;
        background-color: #0A80B9;
        overflow: hidden;
    }
1
2
3
4
5
6

2. visibility: hidden; 隐藏了元素位置，但是还是占据位置。无法响应点击事件。虽然隐藏了元素，但是DOM还是在，不会引起重排，但是会引起重绘。

   div{
        width: 100px;
        height: 100px;
        background-color: #0A80B9;
        visibility: hidden;
    }
1
2
3
4
5
6

3.dispaly: none;隐藏元素，彻底消失，不占据位置，会引起重排和重排

div{
        width: 100px;
        height: 100px;
        background-color: #0A80B9;
        display: none;
    }
1
2
3
4
5
6

4. opacity:0; 将透明度设置为0，也可以达到隐藏元素的效果。占据位置，不会引发重排，但是会引发重绘。

div{
        width: 100px;
        height: 100px;
        background-color: #0A80B9;
        opacity: 0;
    }
1
2
3
4
5
6