盒子模型是什么

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子（box），也就是一个盛装内容的容器。 一个盒子由四个部分组成：内容content、内边距padding、边框border、外边距margin：

content：显示实际内容，大小可以通过设置 width和 height.

boreder：边框，围绕元素内容的内边距的一条或多条线，属性通过border设置

padding：内边距，是指边框与内容之间的距离

margin：外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域

标准模型

先来做一个选择题：
下列关于盒子宽度，正确的是（）

.box {

    width: 100px;

    height: 100px;

    border: 1px solid #000000;

    padding: 50px;

}
(A) 宽度为100px 高度为100px

(B) 宽度为252px 高度为200px

(C) 宽度为202px 高度为202px

(D) 宽度为202px 高度为152px 

答案是C。

在标准模型中，如果你给盒设置 width 和 height，实际设置的只是内容高度content box，没有包含padding 和 border 。
盒子宽： border-left+ padding-left + width + padding-right + border-right

盒子高：border-top + padding-top + height + padding-bottom + border-bottom
所以在上述选择题中，盒子的宽度不是100px，而是100+50+50+1+1=202

怪异模型

在实际应用中，有很多情况下，我们需要限定盒子的宽度，这就要用到怪异盒子模型，我们可以通过css样式box-sizing来进行切换:

.box {
  box-sizing: border-box; /* 怪异盒子模型 */
  box-sizing: content-box; /* 标准盒子模型 */
}

怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度
正常盒模型的大小是由内到外的，由内部决定外部的大小；而怪异盒模型是由外而内的

再回到上一个问题，我们修改一下.box的属性，然后再看盒子的宽高：

.box {

    width: 100px;

    height: 100px;

    border: 1px solid #000000;

    padding: 50px;
    
    box-sizingL border-box;

}
(A) 宽度为100px 高度为100px

(B) 宽度为252px 高度为200px

(C) 宽度为202px 高度为202px

(D) 宽度为202px 高度为152px 

现在应该选什么呢？答案是A