CSS3盒模型

默认情况下，元素的宽度和高度的计算方式如下：
width+padding+border=元素的实际宽度
height+padding+border=元素的实际高度
所以真实显示的宽度和高度会比设置的width和height更大。

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue; 
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
}

这两个div设置的宽度和高度一样，但真实显示的大小不一致，因为div2设置了内边距。

CSS3box-sizing属性可以设置一个元素的width和height中是否包含padding和border。

属性值：

1. content-box：默认值。padding和border不被包含在定义的width和height之内。对象的实际宽度/高度等于设置的width/height值加border、padding之和。
2. border-box：padding和border被包含在定义的width和height之内。对象的实际宽度/高度就等于设置的width/height值。

.div1 {
   width: 300px;
   height: 100px;
   border: 1px solid blue;
   box-sizing: border-box;
}

.div2 {
   width: 300px;
   height: 100px;
   padding: 50px;
   border: 1px solid red;
   box-sizing: border-box;
}

来源：CSDN

作者：花铛

链接：https://blog.csdn.net/wsln_123456/article/details/103999236