Home >Web Front-end >CSS Tutorial >Detailed explanation of the usage of four common attribute values in css display attribute (code example)
Detailed explanation of the usage of four common attribute values in css display attribute (code example)
- 青灯夜游Original
- 2018-09-07 14:00:505438browse
When we develop web front-end, in order to make the website more visually beautiful and richer in effect, the powerful properties of css naturally play an indispensable role. So here we will mention an attribute we often use when developing web front-ends, css display attribute. All major browsers support the display attribute. Secondly, we all know that the display attribute specifies the type of box that the element should generate. It is often used in the CSS display attribute, and it is also the most common attribute value: none, block, inline, inline-blockt.
Next, we will explain in detail the most common attribute value usage in the css display attribute through specific code examples.
1: display: none, the setting element will not be displayed
<!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>数字2不会显示出来</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>The rendering of the above code is as follows:
display: none, the set element will not be displayed, and the space that will make the element realistic will not be retained. But there is another visibility: hidden, which retains the space of the element. To learn more, read css visibility property.
2: display:block, display the element as a block-level element
Display the element as a block-level element, with line breaks before and after the element. After setting it to block, the element can set width and height. Elements occupy their 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元素定义了宽与高，宽与高都显示为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 rendering of the above code is as follows:
The width and height of the span tag are displayed as 30px. When we remove the display:block in the code, the displayed rendering is as follows:
Obviously, when we After display:block is removed, the height and width of span cannot be set.
The span tag is an inline element. You cannot set the height, width, top, bottom, left, and right margins, padding, and margin of the element. However, when display:block is set for the span tag, the inline element can be converted into a block. element, so that you can set the element's height, width, top, bottom, left, and right margins, padding, and margin.
Three: display:inline, displays the element as an inline element
The default attribute of display. Displays the element as an inline element with no line breaks before or after the element. We know that the width and height of inline elements cannot be set, so once the display attribute of the element is set to inline, setting the attributes height and width is useless. At this time, the height that affects it is generally the height (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>p标签和div标签同为块状元素，本应无法在同一行显示;</p>
<div>此时全为内联元素，不换行，在同一行显示。</div>
</div>
</body>
</html>The rendering of the above code is as follows:
Four: inline-block, display the element as an inline block element
Inline block elements. This attribute value combines the characteristics of inline and block. You can combine 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 usage examples of none, block, inline, and inline-block. It has certain reference value and I hope it will be helpful to friends in need!
The above is the detailed content of Detailed explanation of the usage of four common attribute values in css display attribute (code example). For more information, please follow other related articles on the PHP Chinese website!