What does display none mean? Usage example of display none-CSS Tutorial-php.cn

What does display none mean? Usage example of display none

不言

Release： 2018-10-23 14:58:49

Original

65498 people have browsed it

The display attribute of css is often used in web page layout, especially the four attribute values of block, inline-block, inline and none in the display attribute. Today’s article will introduce it to you. Friends in need can refer to the usage of the none attribute value in the display attribute.

ps: For a brief introduction to the relevant knowledge of the css display attribute, you can refer to What does the css display attribute mean? Detailed explanation of display attribute in css.

First let’s take a look at what display none means?

display:none means:

Hides the element and separates it from the document. The flow is to hide the area and does not occupy the actual space, but it does not affect the background. To be honest, you can get hidden elements. Simply put, when the element is set to none, it will neither occupy space nor be displayed, which is equivalent to the element not existing.

After reading the meaning of display none, let’s take a look at the usage of display none.

Usage of display none:

Let’s look directly at an example of display:none:

<html>
<head>
<title></title>
<style type="text/css">
    div{
        background: lightblue;
        width: 200px;
        height: 200px;
    }
    span{
        background: pink;
        display: none;
    }
</style>
</head>
<body >
    <div><span>需要隐藏的区域</span></div>
</body>
</html>

Copy after login

If there is no span in the above code Set the display:none attribute value; the effect is as follows:

What does display none mean? Usage example of display none

#If the display:none attribute value is set, the effect will be as shown in the following figure: the area that needs to be hidden is was hidden.

What does display none mean? Usage example of display none

What you need to pay attention to when using display:none is:

1. If it is through a style file or

2. If you directly use display:none to hide an element in the style file or page file code, after loading the page, without setting the style through js to display the element, using js code will Some attributes of the element cannot be obtained correctly, such as offSetTop, offSetLeft, etc. The returned value will be 0. These values can only be obtained correctly after setting style.display in js to display the element.

The above is the detailed content of What does display none mean? Usage example of display none. For more information, please follow other related articles on the PHP Chinese website!