How to use display in css
Editor to share with you how to use display in css, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
Display attribute
The display property can have multiple values, but the ones that are often used are as follows
None: this element will not be displayed.
Block: this element will be displayed as a block-level element with a newline character before and after it.
Inline: this element is displayed as an inline element without a newline character before and after the element.
Inline-block: inline block element, with both block-level and row-level attributes.
So in this article, I will introduce block,inline,inline-block and none, which are commonly used attribute values in detail.
Display:block
Features: occupy a single line, you can change the width and height through CSS
Commonly used block-level element: div,p,ul,li,ol,form,address
Display:inline
Features: content determines size, width and height cannot be changed through CSS
Commonly used row-level element: span,strong,em,a,del
Div {
Background-color:pink
}
Span {
Background-color:yellow
}
123Universe / block level element
Helloworld
/ / Row-level elements
As shown in the figure above, you can see that the block element occupies the full width of a line, and you want to start with a new line when the content below width:100%,
On the other hand, the row-level element only displays its own part of the content and does not occupy a line.
Display:inline-block
Common inline block elements: img, input
Features: the content determines the size and can change the width and height
Span {
Background-color:yellow
Display:inline-block;// sets row block level elements
Width:100px
Height:30px
}
Helloworld
The above is all the contents of the article "how to use display in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
