Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.