Home > Article > Web Front-end > What does display block mean? how to use?
What does display block mean? how to use?
- 不言Original
- 2018-10-24 14:08:32111230browse
We all know that there is a block attribute value in the display attribute, so what does this display:block mean? How can it be used? This article will introduce to you the meaning of display:block and its usage. Friends in need can refer to it.
First of all, let’s take a look at what display:block means?
In fact, what does the css display attribute mean? Detailed explanation of the display attribute in css In this article, we have already talked about the meaning of the display:block attribute. Simply put, setting display:block is to display the element as a block-level element.
After reading the meaning of display:block, if you still don’t understand it, then let’s read on and see How to use display:block? Through the usage of display:block, we can further understand the meaning of display:block.
Recommended Manual:CSS Online Manual
Usage of display:block:
For all block-level elements, there is no need to use display:block to define, because the default attribute of block-level elements is block; so display:block is more commonly used like and , etc. Among elements that are not block-level elements, let’s take a look at specific examples:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
width: 200px;
height: 30px;
}
</style>
</head>
<body>
<span style="background-color: red ">php中文网</span>
<span style="background-color: red ">php中文网</span>
<span style="background-color: red ">php中文网</span>
</body>
</html>The above code is not defined with display:block, and the effect is as follows:
It can be clearly seen from the above renderings that setting the width and height of span is useless, and the content is all on the same line. Let’s take a look at what it will look like using display:block definition. The code As follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
width: 200px;
height: 30px;
display: block;
}
</style>
</head>
<body>
<span style="background-color: red ">php中文网</span>
<span style="background-color: red ">php中文网</span>
<span style="background-color: red ">php中文网</span>
</body>
</html>The effect of using display:block is as follows:
The above effects can be clearly seen that they are effective for the width and height settings and are also exclusive to One line.
Recommended related articles:
1.How to use display in css
2. Solution to the problem that the width cannot be set to 100% when setting the display:block attribute of the img tag
Related video recommendations:
1.CSS video tutorial - Jade Girl Heart Sutra Edition
After reading the content introduced above, do you now have a deeper understanding of display:block? For more knowledge about the display:block attribute, you can refer to php Chinese Net’s css learning manual.
The above is the detailed content of What does display block mean? how to use?. For more information, please follow other related articles on the PHP Chinese website!