A box model consists of the following:
1: margin: margin, spacing from other elements
2: boder: border, the "border" of the current div
3: padding: the distance between the actual content "content" and the border
4: content: The actual content area in the box model, the light blue area in the image above.
Generally, when defining the width and height of an element, if no special specification is made, the settings of the height and width are applied to the content layer. The CSS style sheet in the above figure is defined as follows:
- width: 100px;
- height: 100px;
- background-color: red;
- padding: 20px;
- display: inline-block;
- box-sizing: content-box;
- border: black 1px solid;
- margin: 10px;
- It can be seen from the style sheet that the actual size of the light blue layer, that is, the content layer, is 100*100, and under the premise of setting padding: 20, the entire div becomes 140*140, and after setting the width of the boder border The final size becomes 142*142, so the size of a box should contain the boder, padding, and content content, and the margin is the distance from other elements, which will not affect its own size.
Careful friends may find that in the style sheet, the box-sizing property is added, and the set value is content-box, that is, setting the width and height is set on the content, which is the same as not setting it. Another value of box-sizing is boder-box, after setting this property, the entire div will become this width and height after setting the width and height
The box-sizing property is the special designation mentioned at the beginning.
In summary, when the box-sizing property is not set, or when the box-sizing is set to content-box, the width and height of the element is set to the content layer, and the actual div size will be added with padding and border ; After setting box-sizing to border-box, the setting of width and height is the size of the entire box.