Deeply understand the difference between display:none and visibility:hidden in CSS-CSS Tutorial-php.cn

Deeply understand the difference between display:none and visibility:hidden in CSS

yulia

Release： 2018-09-26 14:37:28

Original

2619 people have browsed it

Sometimes you need to hide some elements in the project, you will use display:none or visibility:hidden. Both methods can achieve the hidden effect, so what is the difference between them? This article will tell you about the difference between display:none and visibility:hidden in CSS. Friends in need can refer to it.

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index4</title>
</head>
<body>
    <div>
        <!--display:none是隐藏元素，隐藏后它并不会再占用之前所占的区域(也就是说，连它自己的位置都隐藏掉了)-->
        <div style="display:none; width:100px;height:100px">小苹果</div>
 
        <div style="width:100px;height:100px; background-color:yellow">A</div>
 
        <!--visibility:hidden是隐藏元素，隐藏后，它还会占用之前所占的区域（也就是说仅仅是隐藏它自己的外观，并不会隐藏自己的位置）-->
        <div style="visibility: hidden; width: 100px; height: 100px">圣女果</div>
 
        <div style="width:100px;height:100px; background-color:yellow">B</div>
    </div>
</body>
</html>

Copy after login

Deeply understand the difference between display:none and visibility:hidden in CSS

In addition: the server-side control has a Visible property:

Indicates whether the control is visible. If Visible=False, it will be ignored during rendering. Remove this control, which means that this control will not generate HTML code. This means that this control does not exist at all. Since the control does not exist, it will not occupy the area.

The above is the detailed content of Deeply understand the difference between display:none and visibility:hidden in CSS. For more information, please follow other related articles on the PHP Chinese website!