What does display:none mean?
Jun 24, 2020 pm 03:46 PM"display:none" means to set the element to be invisible and not even generate a box model. It is generally used for hidden elements that do not take up space. The display attribute specifies the type of box that the element should generate. When its value is "none", it can be specified that the element does not generate a box. Hiding the element can be understood as deleting the element from the page.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
display:none means:
"display:none" means that the set element is invisible and connected The box model is not generated and is generally used for hidden elements that do not take up space.
The "display:none" style truly hides the element according to the meaning of the word.
display The attribute specifies the type of box that the element should generate. When its value is "none", it can be specified that the element does not generate a box.
Using the display attribute, hidden elements do not occupy any space. Not only that, once display is set to none, any direct user interaction on the element will not be effective.
Use "display:none" to hide the element without occupying space, so dynamically changing this attribute will cause rearrangement (change the page layout), which can be understood as in the page It is the same as deleting the element; it will not be inherited by descendants, but its descendants will not be displayed. After all, they are all hidden together.
Let’s take a look at the usage 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>If the display:none attribute value is set, the effect will be as shown in the figure below: the area that needs to be hidden will be hidden.
Recommended tutorial: "HTML Tutorial"
The above is the detailed content of What does display:none mean?. For more information, please follow other related articles on the PHP Chinese website!
Hot Article
Hot tools Tags
Hot Article
Hot Article Tags
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Fujifilm X-M5 price expectations rise as leaked selfie display adds complexity to the formerly affordable camera line
Sep 07, 2024 am 09:34 AM
Fujifilm X-M5 price expectations rise as leaked selfie display adds complexity to the formerly affordable camera line
Samsung: New, large display based on E Ink technology displays colors and communicates wirelessly
Jun 19, 2024 pm 03:37 PM
Samsung: New, large display based on E Ink technology displays colors and communicates wirelessly
Comparison: Apple Studio Display vs Samsung Smart Monitor M8
May 11, 2023 pm 10:46 PM
Comparison: Apple Studio Display vs Samsung Smart Monitor M8
Apple Studio Display's power cord is detachable, but requires special tools
May 17, 2023 pm 03:05 PM
Apple Studio Display's power cord is detachable, but requires special tools
Comparison: Apple Studio Display vs LG UltraFine 5K Display: Which one is better?
Apr 16, 2023 pm 08:25 PM
Comparison: Apple Studio Display vs LG UltraFine 5K Display: Which one is better?
Boot Camp updated to support Apple Studio Display
May 20, 2023 pm 11:34 PM
Boot Camp updated to support Apple Studio Display
