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

Editor to share with you an example of the use of the display attribute in css. I hope you will gain something after reading this article. Let's discuss it together.

Css Positioning Properties Positioning

Display:none

No more page rendering elements

Css-test

.content {

Display:none

}

This paragraph will not be displayed.

This paragraph will be displayed.

When the display attribute in an element is none, the browser does not render anything in the element and does not occupy the browser window space, but it exists in the document stream.

Display:block

Block level element

Css-test

P element is a block block-level element by default

Div is also a block block-level element by default

Characteristics of block-level elements: the contents of the element will be filled with the entire line

Display:inline

Inline element

Css-test

.content {

Display:inline

}

An element whose display attribute is inline is called an inline element.

When adjacent elements are also inline attributes, if the content is not enough to support the whole line. The content of the adjacent element is displayed next to it, and when the whole line of the window is not displayed enough, the content will wrap.

Display:inline-block

Inline block-level elements

Css-test

.content {

Display:inline-block

}

Elements whose display attribute is inline-block are called inline block-level elements.

The characteristic of intra-line block-level elements is to occupy a single line, and the content does not spread out the whole line.

Display:list-item

List Properti

Css-test

.content {

Display:list-item

}

The element is displayed as a list when the display attribute is list-item

Buy vegetables after work.

I have to cook when I go home

Display:inherit

Inherit the attributes of the parent element

Css-test

.content {

Display:inherit

}

Normal span element effect, the content will not spread the whole line

The effect of inheriting the parent attribute. The value of the parent's display attribute is the content that extends the entire line after block inheritance.

After reading this article, I believe you have a certain understanding of "examples of the use of display attributes in css". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.