In-depth understanding of the box model (1)

The box model is an important concept when CSS controls pages. only by having a good grasp of the Box Model and the usage of each element can we really control the various elements on the page. the following describes the basic concepts of the box model.
(1 ). all the elements on the page can be regarded as a box that occupies a certain page space. Generally, the occupied space is usually larger than the pure content. In other words, you can adjust the position and size of the box by adjusting the margin and distance of the box.
(2 ). A page consists of many such boxes that affect each other. Therefore, you need to understand the box model from two aspects. one is to understand the internal structure of an isolated box, and the other is to understand the relationship between multiple boxes.

1. Before learning the box model, let's look at an example. Suppose there are four pictures on the wall, neatly arranged. For each picture, there is one"Border", Which is called"Border"In each frame, there is usually a certain distance between the painting and the border. This distance is called"Padding", In English"Padding", Each painting is usually not close together, and the distance between them is called"Margin", Which is called"Margin"
Therefore, the padding-border-margin model can also be referred to as "box" and "box" in English ";
In CSS, an independent Box Model consists of four parts: content, border, padding, and margin. the actual width (or height) of a box is composed"Content + padding + border + margin"In CSS, you can set the width and height values to control the size of the rectangle occupied by the content,
2. Pay attention to one important principle:In the box model, they all rotate clockwise from the top, that is, the top, right, bottom, and left order.

The content is to be continued ................................