In-depth understanding of CSS/block-level elements and inline elements_html/css_WEB-ITnose

Today I finally have a more rational understanding of block-level elements and inline elements in HTML. First of all, w3c’s explanation of block and inline is:

1. Research on block

Through w3c’s explanation, that is to say, block (block Level) elements are displayed on their own line. Its sibling elements must not be on the same line as it (unless out of the document flow). Let’s talk about the default width of block elements.

1. No width is set: the default is the same width as the browser's viewable area (after the browser's default style is reset).

The yellow line you see is actually a DIV with no width and height set. The border is a 1-pixel solid yellow line. It can be seen that it covers the entire screen.

2. The width is not set, but the width is set by the parent element:

In this example, the yellow line is a P with no width set, and its parent element is A DIV with a width of 200px, the offsetWidth (offsetWidth=border width padding) attribute of P output in the console is: 200. In other words, P inherits the width of DIV to a certain extent. But it’s not entirely true, because the width of the printed P is added with the border width of 2px, so if the width of the child element is not set, it will fill 100% of the width of the parent element, but it will not fill the height. !

Look at the following example question:

Already have HTML code:

If the following CSS is applied:

.a{ width:200px; height:100px;}

.b{ padding:20%; background -color:red; } What is the size of the red area? width? height?

Analysis, because .b is a child element of .a, and .b has no width set, we know from the research just now that the width of .b completely fills .a, This width includes the border and padding. In other words, the width of the .b we can see is still 200px, and will not be enlarged due to the addition of padding ! The height is not the case, it is 200*20%*2=80px.

So the answer to this question is readily apparent: width: 200px; height: 80px. (But the situation under ie6 and mixed mode has not been tested)

2. Research on inline

Inline elements can be displayed on the same line Multiple lines will not be wrapped until the browser window is not wide enough to accommodate them. Let's take a look at the width and height of inline elements.

1. A span element with no width and height set, and a 1-pixel blue solid line is added to the display effect to be purple:

2. After adding a height of 50px to his father It’s purple:

There is no change between 1 and 2.

3. After adding a height of 50px, it will be purple:

1, 2, and 3 display exactly the same. .

Normal document flow inline does not support width and height settings, so the span in the example will not inherit the width and height of its father, and the width and height set by yourself will not work. The height itself is actually the default line-height height value. Let’s take a look at adding padding to it:

This is the case where padding: 10 is added. His father I set a DIV with a height of 10px. It can be seen that span exceeds the DIV, so the width and height of the inline element have nothing to do with the parent element.

3. Summary of the difference between inline and block

1. The intuitive difference between inline elements and block-level elements

Inline elements will be arranged in a straight line, all on the same line, arranged horizontally

Block-level elements each occupy one line, arranged vertically. Block-level elements start on a new line and end with a line break.

2. Block-level elements can contain inline elements and block-level elements. Inline elements cannot contain block-level elements.

3. The difference in attributes between inline elements and block-level elements is mainly in the box model attributes. Setting width for inline elements is invalid, height is invalid (line-height can be set), margin top and bottom are invalid, and padding is invalid.

4. Common inline elements and block elements

Block-level elements

Inline elements

Variable elements