Organize daily study notes in HTML design pattern

There is no project done this week, and I have been studying the HTML design model. I will organize and share my learning results this week for your reference

HTML design pattern learning notes

This week I mainly learned HTML design patterns, and now I will summarize my learning content as follows:

one. Learning of box model

There is a basic design model in CSS called the box model, which defines how elements are parsed as boxes. I mainly learned six types of box models, namely inline box model, inline-block box model, block box model, table box model, absolute box model and floating positioning box model.

The box model design pattern is built into CSS, which defines the relationship between the following properties: boundaries, borders, fills, and content. Each attribute includes four parts: upper, right, lower, and left; these four parts can be set at the same time or separately; the borders can be divided into size and color. We can understand it as the thickness of the box seen in life and what color of the box is made of. The boundary is how far the box should keep from other things. The content is what is contained in the box and the material filled in the spare part in the filling box.

Inline box models are parsed in inline arrangement order, they are sorted horizontally from left to right, and when they exceed the width of their nearest terminal block ancestors, they are replaced with a new row. width, height, and overflow do not work on inline elements, as they always match the width and height of the content. margin and line-height can be applied to inline elements in some special way. The horizontal margin changes the position of inline elements in the order of arrangement. A positive value of margin-left will keep the element away from the element before it, while a negative value will pull it closer. A positive value of margin-right will keep the element away from its next element, while a negative value will pull it closer. margin-top and margin-bottom do not work for inline elements. The border sets borders for inline elements in a special way, and the horizontal border will change the position of inline elements in the arrangement. The left border will make the element to the left, and the right border will make the next element to the right. The upper and lower borders will be displayed outside the inner margin, but they do not extend to the row height or change the position of the element in the vertical direction. The template of this pattern can be expressed as follows: