What are the display modes of html block-level tags, inline tags, and inline block tags?

This time I will bring to you what are the display modes of html block-level tags, inline tags, and inline block tags. Notes on using html block-level tags, inline tags, and inline block tag display modesare Which ones, the following are practical cases, let’s take a look.

In today’s lecture, we talked about the display mode of tags in HTML, which are roughly divided into block-level tags and inline tags. Then when beginners first use tags, they will find that some attributes do not work on some tags, such as width, height, horizontal centering, etc. In fact, the use of this attribute only works on block-level tags. Personally, I think this is something that beginners can easily overlook, so I wrote it down!

For example, there will be a situation where horizontally centering the p tag has an effect, but adding a horizontally centered attribute to the font has no effect (as follows):

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

I am a block-level tag p

I am an inline tag font

After running the preview, p can center the text horizontally, but font cannot

Then the above problem is related to the display in html It’s about the mode:

Characteristics of the display mode:

Mainly divided into two categories:

Block-level elements: occupy one line, take effect on the width and height attribute values; if If no width is given, the block-level element will default to the width of the browser, that is, 100% width;

Inline elements: multiple labels can exist on one line, and the width and height attribute values ​​will not take effect, and will be completely supported by the content. Width Height!

There is also a display mode that combines the advantages of the two modes:

Inline block element: The combined inline and block-level advantages can not only take effect on the width and height attribute values, but also more Each tag is displayed in one line;

The display mode in HTML is divided into block level and in-line. The commonly used block levels are: p, p, h1~h6, ul, li, dl, dt, dd.. . Commonly used inline elements include: span, font, b, u, i, strong, em, a, img, input, where img and input are inline block elements.

Then some students will think, can’t I control the width and height of span or font? Okay, so let’s put aside floating and positioning this time, and let’s convert them to each other through the display attribute:

1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;

Just give the corresponding tag Using this display attribute and taking the corresponding value, you can convert the display modes to each other.

I have said before whether the text-align attribute is effective. The reason is that if the block-level tag is not given a width, the block-level element will default to the width of the browser, which is 100% wide. Then at 100 The centering of the width of % takes effect; but the width of the inline element is completely stretched by the content, so the width is the width of the content. Let's give a background test to see:

So the block level is centered in the middle of the box However, because the width of the inline element is the width of the content and there is no space for centering, text-align:center; has no effect; but it will be different if the font is converted to block level:

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

Same as Reason, if the block level is converted to inline, the text cannot be displayed in the center.

Because in HTML, inline elements are regarded as tags with text properties. The block level can center the text horizontally. Then the inline tags at the block level are regarded as text properties. Then use text at the block level. -align:center;, the inline tags inside will be horizontally centered like text in the block-level tags:

Without text-align:center;:

p{ padding:5px;background:green; color:red;}    
font{ background:yellow;}    
<p>    
    <font>我是行内标签font</font> <font>我是行内标签font</font>    
</p>

With text -align:center;After

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

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Basic knowledge of HTML, detailed introduction to the style of hyperlink settings

Basic knowledge of HTML .Detailed introduction to css style sheets and style attributes

How to use the href attribute of the HTMLa tag to specify relative paths and absolute paths

The above is the detailed content of What are the display modes of html block-level tags, inline tags, and inline block tags?. For more information, please follow other related articles on the PHP Chinese website!