Home > Article > Web Front-end > How to use display in css
Display commonly used attribute values are block-level block, row-level inline, row-block-level inline-block, none, and row-level or block-level labels can be converted through display
This article will share the display attribute in CSS, which has certain reference value. I hope it will be helpful to everyone
We usually use the values block, none, inline, and inline in the display attribute when making CSS layouts. -block So today we will learn how to use them
display attribute
The display attribute can have multiple values, but the commonly used ones are as follows
none: This element will not be displayed.
block: This element will be displayed as a block-level element, with line breaks before and after this element.
inline: This element will be displayed as an inline element, with no line breaks before and after the element.
inline-block: Inline block element, which has both block-level attributes and row-level attributes.
So in this article, I will introduce in detail block, inline, inline-block and none, these commonly used attribute values
display: block
Features: Occupies one line by itself, the width and height can be changed through CSS
Commonly used block-level elements: div, p, ul, li, ol, form, address
display ：inline
Features: The content determines the size, and the width and height cannot be changed through CSS
Commonly used row-level elements: span, strong, em, a, del
<style>
div{
background-color: pink;
}
span{
background-color: yellow;
}
</style>
</head>
<body>
<div>123</div>//块级元素
<p><span class="span">hello</span>world</p>//行级元素As shown in the picture above, you can see that the block element occupies the full width of the line. If you think of it as width:100%, the following content should start with a new line.
And the row-level element only displays its own part. The content does not occupy a row
Rendering
Row block-level element conversion
(1) Convert block-level elements to row-level elements
Set display: inline for block-level elements
The result is like this
(2) Row level Convert elements to block level
Set display:block for row-level elements
The result is as follows
display:inline-block
Common inline block elements: img, input
Features: The content determines the size, and the width and height can be changed
<style>
span{
background-color: yellow;
display:inline-block;//设置行块级元素
width:100px;
height:30px;
}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>Rendering
The difference between display: none and visibility: hidden
display: none is used to hide elements, which is not only invisible but also takes up no space. Size
visibility: hidden can also be used to hide elements, but they still exist even if they are not visible, leaving an empty space
Example
display:none
.span{
background-color: aquamarine;
display:none;}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p> Rendering
hello is hidden but does not leave any space
visibility: hidden
<style>
.span{
background-color: pink;
visibility: hidden;}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>Effect Picture
hello is hidden but still has a vacant position
Summary: The above is the entire content of this article. I hope it will be useful for everyone to learn display. help
The above is the detailed content of How to use display in css. For more information, please follow other related articles on the PHP Chinese website!