1. Function
Define how to calculate the total width and total height of an element, whether the main settings need to add padding ( padding) and borders, etc.
2. Attribute value
content-box
By default, the width of any border and inner border will be added to the width of the last drawn element
-
border-boxThe set border and padding values are included in width
3. Examples
<body>
<div class="container"></div>
</body>
* {
margin: 0;
padding: 0;
}
body {
border: 1px solid rgb(192, 192, 235);
margin: 10px;
}
.container {
width: 100px;
height: 100px;
background: pink;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
- content-box
* {
box-sizing: content-box;
}
![[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-XwuhHy4x-1650077940119)(image-20220416105318659.png)]](https://img-blog.csdnimg.cn/edadc33bde5a4421b549fb5a5c0b773a.png#pic_center)
![[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-MXUa2xC6-1650077940121)(image-20220416105457842.png)]](https://img-blog.csdnimg.cn/ce389491923b499c9ce636c9c6ff8bef.png#pic_center)
At this time, the width of the box content area is the set width, and the actual width is:
width+padding*2+border*2+margin*2
- border-box
* {
box-sizing: border-box;
}
/* 此时的盒子比上面的盒子要小 */
![[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-yKhqp7mZ-1650077940121)(image-20220416104952115.png)]](https://img-blog.csdnimg.cn/73f6f82b30114f2580f2b587ba7b0a6b.png#pic_center)
![[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-Ci0ifSdy-1650077940122)(image-20220416105126344.png)]](https://img-blog.csdnimg.cn/222225852b4d48bc9ba99d40b0b64851.png#pic_center)
As can be seen from the above figure
content + padding + border + margin =width, the actual width of the box is the set width