HTML and CSS: block elements, inline elements, and inline block elements

It has been nearly half a year since I started to access the HTML + CSS layout. Besides the three or four months of soy sauce in the middle, I spent about a month working on it, summarize what you have learned.
First, let's talk about HTML elements, which are divided into three types: block elements, inline elements, and inline block elements.

1. Block Element display: The block feature is horizontal stretching and vertical wrapping. You can set the width and height. For example, if the page body is defined first, the width of the body is generally equal to the width of the page (with a margin of 8 px ), if you define a p element, if the width of the p element is not set, the p element is automatically stretched to the width of the body. The package means that the vertical height of p can enclose the text content. You have written several lines of text that are several line-Heights. Another feature of a block element is that if its margin does not touch the border or padding of the ancestor element, it overlaps the margin-top and margin-bottom in the vertical direction of the ancestor element. The upper and lower adjacent margin elements of the same level also overlap, and a margin merge is generated.
2. Inline element display: the automatic package of the inline feature. the horizontal and vertical directions are automatically wrapped to the width of the content. Because the inline element is embedded in the row, margin-top and margin-bottom set for the vertical direction of the inline element will not affect layout of the span element, however, the margin-left and margin-right settings in the horizontal direction affect the indentation of inline elements. Because of its automatic packaging feature, the overflow attribute is invalid.
3. Inline block element display: inline-block: in addition to the feature of automatic inline element wrapping, it also has the feature that block elements can set the height and width. An important feature of inline block elements is that they can change their layout by setting their margin, but the margin of inline block elements does not overlap with those of other elements.

The source code is as follows:

<div style="position:relative; width:200px; margin:20px auto; height:200px; background-color:yellow; border:1px solid black;">    <span style="font-weight:bold; position:absolute; top:0;left:0">block</span>    <div style="width:120px; height:120px; background-color:green; margin:40px;">    　　<div style="display:block; width:40px; height:40px; background-color:blue; margin:40px"></div>    </div></div>

Compare the following three elements by changing the display attribute of the div element:

Block

  Inline-block

  Inline

.

As you can see, the margin in the horizontal direction is not merged, but in the vertical direction,BlockMerged,InlineOfMarginThe property is invalid, andInline-blockOfMarginDoes not overlap with other elements. In the above example, although the size of the inline element is set40px * 40pxBut in fact, becauseDivNO content in, should be changed0*0To facilitate representation, addSpanThe content is a ".".