Next, we will use the specific code example to one by one details the most common property value usage in the CSS display property.
One: Display:none, setting element does not display
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:none</title>
<style>
* {
Padding: 0;
Margin: 0;
List-style: none;
}
.demo{
Width: 200px;
Height: 200px;
Margin:50px auto;
}
Ul li {
Float: left;
}
Span {
Width: 30px;
Height: 30px;
Color: #fff;
Background: red;
Margin: 5px;
Text-align: center;
Line-height: 30px;
}
.a1{
Display: none;
}
</style>
</head>
<body>
<div class="demo">
<p>The number 2 will not be displayed</p>
<ul>
<li>
<span>1</span>
</li>
<li>
<span class="a1">2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span>4</span>
</li>
<li>
<span>5</span>
</li>
</ul>
</div>
</body>
</html>
Display :none, the setting element will not be displayed, and the actual space of the element will not be preserved. But there is another visibility: hidden, which is the space for the element. Learn more, read the css visibility property.
Two: display: block, display the element as a block-level element
The element is displayed as a block-level element with a line break before and after the element. When set to block, the element can be set to width and height. The element is on its own line.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:block</title>
<style>
* {
Padding: 0;
Margin: 0;
List-style: none;
}
.demo{
Width: 500px;
Height: 200px;
Margin:50px auto;
}
Ul li {
Float: left;
}
Span {
Display:block;
Width: 30px;
Height: 30px;
Color: #fff;
Background: red;
Margin: 5px;
Text-align: center;
Line-height: 30px;
}
</style>
</head>
<body>
<div class="demo">
<p>Span elements define width and height, width and height are displayed as 30px</p>
<ul>
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span>4</span>
</li>
<li>
<span>5</span>
</li>
</ul>
</div>
</body>
</html>
The width and height of the span tag are displayed as 30px.
Obviously, when we remove the display:block, the height and width of the span cannot be set.
The span tag is an inline element. You can't set the height and width of the element, and the padding and margin of the top and bottom margins. However, when you set the display:block for the span tag, you can convert the inline element to a block element, so you can set it. Element height, width, and top and bottom padding and margin.
Three: display: inline, display the element as an inline element
The default property of display. Shows an element as an inline element with no line breaks before and after the element. We know that inline elements cannot be set in width and height, so once the element's display property is set to inline, setting the properties height and width is useless. The height that affects it at this time is generally the font-size and padding of the internal elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:block</title>
<style>
* {
Padding: 0;
Margin: 0;
List-style: none;
}
.demo{
Width: 1000px;
Height: 200px;
Margin:50px auto;
}
.demo p{
Display:inline ;
Color: #0081EF;
}
.demo div{
Display:inline ;
Color: #70DBDB;
}
</style>
</head>
<body>
<div class="demo">
<p>The p-tag and the div tag are both block elements and should not be displayed on the same line;</p>
<div> is all inline elements at this time, no line breaks, and is displayed on the same line. </div>
</div>
</body>
</html>
Four: inline-block, display the element as an inline block element
Inline block elements. This attribute value combines the characteristics of inline and block. It can be combined with inline and block to understand inline-block, that is, it is an inline element, can be displayed on the same line, and can set width and height.
The above is a detailed introduction to the usage of common attribute values in the css display attribute, including specific examples of use of none, block, inline, and inline-block. Have a certain reference value, I hope to help friends in need!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
