How to convert row elements to block elements in css
This article mainly explains "how to convert line elements and block elements in css". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to convert line elements and block elements in css"!
Operating environment of this tutorial: Windows 7 system, CSS3 && HTML5 version, Dell G3 computer.
In HTML, there are two levels of tags:
In-line element: alongside other in-line elements; width cannot be set, default width is the width of text.
Block level element: occupy a row, can not be juxtaposed with any other element; can accept width and height, if not set width, then the width will default to 100% of the parent.
Example:
A tag is a block-level element, and a tag is an inline element.
p{ background: paleturquoise; } span{ background: paleturquoise; }
Test Code p Label
Test Code p Label
Test Code Span Label Test Code Span Label
However, the element type is transformable, and we can use the css display attribute to transform row elements and block elements to each other.
The display attribute specifies the type of box the element should generate.
block This element will appear as a block-level element, preceded and followed by newlines.
inline default. This element is displayed as inline (inline), with no newlines before or after the element.
Turn row elements into block elements
Set display:block; in inline elements to make inline elements block-level.
Turn block elements into row elements
Setting display:inline; in a block-level element makes it inline.
Examples:
p{ background: paleturquoise; display: inline; } span{ background: paleturquoise; display: block; }
Test Code p Label
Test Code p Label
Test Code Span Label Test Code Span Label
At this point, I believe everyone has a deeper understanding of "how to convert line elements and block elements in css", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!
