css/block-level elements and inline elements in-depth understanding

Today, we finally have a more rational understanding of block-level elements and inline elements in HTML. First, the explanation for block and inline is:

The study of Block

Through the interpretation of the mass, that is, the block (block-level) elements are displayed exclusively on one line. Its sibling element must not be in the same row as the other (unless it is out of the document stream). The following is a question about the default width of the block element.

1. Width is not set: The default is the width of the browser viewable area (after the default browser style is reset).

The Yellow line you see is a div that is not set wide, and the border is a 1-pixel yellow solid line that can be seen across the screen.

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

In this example, the yellow line is a non-width p, whose parent element is a div with a width of 200px, and the offsetwidth (offsetwidth=border+width+padding) attribute of the output p in the console is: 200. That is, to a certain extent, p is inherited from the width of the div. But it is not entirely, because the width of the printed p is added to the width of the 2px border, so that the child element is not set width will be 100% to fill the width of the parent element, but will not fill the height!

Look at the following example:

HTML code already available: <div class= "a" ><div class= "B" ></div></div>

If the following CSS is applied:

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

. b{padding:20%; background-color:red; Ask the size of the red area? Width Height?

Analysis, because. b is a child element of. A, and. B is not set to width, as we learned from the study just now. The width of B is fully populated. A, the width of which includes the border (border), margin (padding). That is to say, we can see the width of B is still 200px, not because of the addition of padding and big ! And the height is not, for 200*20%*2=80px.

So the answer is now: width:200px;height:80px. (but not tested under IE6 and promiscuous mode)

Second, the study of the inline

Inline elements can be displayed in multiple lines on the same line until the browser window is not wide enough to accommodate the line break. Let's look at the width and height of the inline element.

1, a SPAN element not set wide, plus 1 pixels blue solid Line display effect is Jiangzi:

2, to his father plus 50px height after is Jiangzi:

There is no change between 1 and 2.

3, add 50px height to him is Jiangzi:

1, 2, 3 shows are exactly the same.

Normal document flow the inline is not supported by the wide setting, so the span in the example does not inherit the father's width and height, and the width of his own setting does not work. The height of its own is actually the value of its default line-height. Take a look at the situation that adds padding to it:

This is the case of Padding:10, and his father I set the div to a height of 10px. You can see that span is beyond the div, so the width and height of the inline element is not related to the parent element.

Iii. Summary of the differences between the inline and block

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

Inline elements are arranged in a straight line, all in the same row, arranged horizontally

Block-level elements occupy one line and are arranged vertically. Block-level elements start at the beginning of the new row and then 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 between the inline element and the block-level element attribute is mainly the box model attribute. The inline element setting width is invalid, the height is invalid (you can set line-height), the margin is invalid, and the padding is not valid.

Iv. Common inline elements and block elements

• Block-level elements

• In-line elements

• Variable element

　　

css/block-level elements and inline elements in-depth understanding