A brief discussion on the display modes of HTML tags (block-level tags, inline tags, inline block tags)

During today's lecture, I talked about the display mode of tags in HTML, which can be roughly divided into block-level tags and inline tags. 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 these attributes only works on block-level tags. I personally think this is also something that beginners can easily overlook, so I wrote it down!

For example, there is a situation where horizontally centering the p tag works, but adding the horizontal center attribute to the font does not work (as shown below):

After running the preview, p can center the text horizontally, but font cannot (as shown below):

Then the above problem is related to the display mode in HTML:

Display mode characteristics:

There are two main categories:

Block-level elements: occupy a single line, and the width and height attribute values ​​are effective; if no width is given , the block-level element defaults to the browser width, which is 100% width ;

Inline elements: Multiple tags can exist in one line. The width and height attribute values ​​are not effective. The width and height are completely supported by the content!

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

Inline block element: It combines the advantages of inline and block level. It can not only take effect on width and height attribute values, but also display multiple tags in one line.

In HTML, display modes are divided into block level and inline. Commonly used block level elements are: div, p, h1~h6, ul, li, dl, dt, dd... Commonly used inline elements are: span, font, b, u, i, strong, em, a, img, input, among which img and input are inline block elements.

Then some students will think, can't I control the width and height of span or font? Yes, so let's put aside floating and positioning this time and talk about converting them to each other through the display property:

1. Convert block-level tags to inline tags: display:inline;

2. Convert inline tags to block-level tags: display:block;

3. Convert to inline block tag: display: inline-block;

As long as you use the display attribute for the corresponding tag and take the corresponding value, you can convert the display mode to each other.

Before this, we talked about whether the text-align attribute is effective. The reason is that if the block-level tag does not give a width , the block-level element defaults to the width of the browser, that is, 100% width , so it will be centered in the 100% width; but the width of the inline element is completely expanded 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, but because the width of the inline element is the width of the content, there is no space to center it, so text-align: center; has no effect; but if the font is converted to block level, it will be different:

Similarly, 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 characteristics, and block level can horizontally center text, then inline tags in block level are regarded as text characteristics. If text-align: center is used at block level, the inline tags inside will be horizontally centered in the block level tags like text:

Without text-align:center;:

After adding text-align:center;

This time I will mainly talk about the characteristics of display mode in HTML. If this article is helpful to you, remember to recommend it!

Original URL: http://www.cnblogs.com/xcaocao/archive/2016/07/07/5649828.html