css盒模型---css核心概念

盒模型

页面中所有元素都被看成是一个矩形盒子，盒子包含元素内容、内边距（padding）、边框（border）和外边距（margin）。

计算盒子大小方式—box-sizing

默认计算方式：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

box-sizing默认值为content-box时：

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

计算出的宽为300+100+2=402

高为：100+100+2=202

当box-sizing=border-box时：

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

宽为：300

高为：100