Display Mode of html tags (Block-level tags, intra-row tags, intra-row block tags) and Label display mode

Display Mode of html tags (Block-level tags, intra-row tags, intra-row block tags) and Label display mode

During the lecture today, we talked about the tag display mode in html, which is roughly divided into block-level labels and intra-Row labels. When using tags, beginners will find that some attributes do not work on tags, such as width, height, and horizontal center, in fact, this attribute can only be used on block-level labels. I personally think this is a very easy place for beginners to ignore, so I will write it down!

For example, the p tag is horizontally centered, but adding the horizontal center attribute to font does not (as shown below ):

p{ color:red; text-align:center;}
font{color:red; text-align:center;}

 

<P> I am a block-level label p </p>
<Font> I am a line label font </font>

After the preview is run, p can center the text horizontally, but font cannot (as follows ):

The above problem is related to the display mode in html:

Display Mode features:

There are two main categories:

Block-level elements:Exclusive row, effective for attribute values with high width;If no width is specifiedBy default, block-level elements are the width of the browser,That is, 100% wide;

Line element:Multiple tags can exist in one row, which does not take effect on the attribute values of width and height. The width and height are fully supported by the content!

There is also a display mode that combines two modes:

Line block elements:The combination of intra-row and block-level functions not only apply to attribute values of width and height, but also display multiple labels in one row;

In html, the display mode is divided into block-level and intra-row. Commonly Used block-level: div, p, h1 ~ H6, ul, li, dl, dt, dd... common intra-row elements include span, font, B, u, I, strong, em, a, img, and input. img and input are intra-row block elements.

So some people will think about it. Can't I control the width and height of span or font? Yes, so we will not talk about floating and positioning this time, so we will use the display attribute to convert them to each other:

1. Converting block-level labels to intra-Row Labels: display: inline;

2. Convert intra-Row labels to block-level labels: display: block;

3. Switch to the line block label: display: inline-block;

You only need to use the display attribute for the corresponding tag and obtain the corresponding value, you can convert the display mode to each other.

Before that, I have said whether the text-align attribute takes effect because it is a block-level label.If no width is specifiedBy default, block-level elements are the width of the browser,That is, 100% wideSo it takes effect in the center of the width of 100%. However, the width of the element in the row is fully influenced by the content, so the width is the width of the content. Let's give a background test:

Therefore, the block level is centered in the middle of the box, but because the element width in the row is the content width and there is no space to live in, text-align: center; does not work; however, if you convert a font to a block level, it will be different:

p{ background:green; color:red; text-align:center;}font{background:green;color:red; text-align:center;display:block;}

 

Similarly, if the block level is converted to intra-row, the text cannot be centered.

In html, row-level elements are considered as labels with text features, and block-level text can be horizontally centered. Row-level labels in block-level fields are considered as text features, if the block-level text-align: center; is used, the intra-Row labels will be horizontally centered in the block-level labels like the text:

When text-align: center is not added:

p{ padding:5px;background:green; color:red;}font{ background:yellow;}

 

<P> <font> I am a line label font </font> </p>

 

After adding text-align: center;

p{ padding:5px;background:green; color:red;text-align:center;}font{ background:yellow;}

 

This is mainly about the Display Mode features in html. If this article is helpful to you, remember to recommend it!