共计 2833 个字符，预计需要花费 8 分钟才能阅读完成。
在网站布局中，咱们会应用各种各样的元素，这些元素实质上就是一个个小的容器，也称之为盒子，盒子外面能够搁置文本，图片，或者其余元素。
什么是 CSS 盒模型呢？
CSS 盒模型实质上是一个包裹每个 HTML 元素的盒子，蕴含 margin、border、padding 和 content 四个局部。
浏览器就是通过盒模型，来计算元素在网页中占据的空间大小的。
后面咱们介绍过这些盒模型的因素：Content，示意盒子的内容，蕴含文本、图像等等。Padding，示意填充内容四周的一个区域，它是通明的。Border，示意围绕填充和内容的边框。Margin，示意边框以外的区域，它也是通明的。
咱们来举个例子。
创立一个 019-css-box-model 文件夹，在文件夹里创立一个 box-model-1.html 文件和一个 box-model-1.css 文件。
构建 html 根底代码，引入款式文件。为了便于比拟成果，咱们定义两个 div 元素，增加不同的类名，补全文本。
HTML
<div class="box1">
盒子模型组成部分: 内容, 内边距, 边框, 外边距
</div>
<div class="box2">
盒子模型组成部分: 内容, 内边距, 边框, 外边距
</div>CSS
* {
margin:0;
padding:0
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: orange;
border:20px solid gray;
padding:20px;
margin:20px;
}
.box2 {background-color: yellow;}关上 CSS 文件，定义通配符选择器，申明款式 margin: 0，padding: 0。勾销所有元素默认的边距和填充款式。
定义 div 选择器，申明款式：width: 200px，height: 200px。为两个 div 元素增加宽度和高度。
定义 .box1 选择器，申明款式：background-color: orange。
定义 .box2 选择器，申明款式：background-color: yellow。
在浏览器里预览成果，两个有背景色彩的盒子就做好了。
给 box1 增加款式：border: 20px solid gray，为橙色的盒子减少一个边框。
比照黄色的盒子，橙色盒子总宽度减少了 40px，总高度也减少了 40px。
持续给 box1 增加款式：padding: 20px。
此时橙色的盒子持续变大。比照黄色的盒子，宽度和高度又减少了 40px。
持续给 box1 增加款式：margin: 20px。
这时咱们发现，因为增加了外边距，橙色盒子的地位产生了偏移。
通过这个例子咱们发现，给元素增加内填充、边框以及外边距之后，盒子会变大并产生地位变动。
那么，如何在所有浏览器中正确设置一个元素的宽度和高度呢？这对于准确的页面布局，意义重大！
计算盒子的宽度和高度，请牢记这两个公式：
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 左边框 + 右边距 + 左边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
再次强调：当利用 CSS 设置一个元素的 width 和 height 属性时，只是设置了元素内容区域的宽度和高度。要计算一个元素的残缺尺寸，必须要加上填充、边框和边距。
咱们将下面这种计算元素大小的盒模型，称作规范盒模型。
那能不能给元素设置了 margin 和 padding 属性后，元素自身的宽高就固定为设置的这个值呢？这就要利用另外一种盒模型，叫做怪异盒模型。
给元素申明 box-sizing 属性，取值为 border-box，这个元素就依照怪异盒模型来出现大小了。
咱们先来做个例子。
在 019-css-box-model 文件夹下，创立一个 box-model-2.html 文件和一个 box-model-2.css 文件。
构建 html 根底代码，引入款式文件。为了便于比拟成果，咱们还是定义两个 div 元素，增加不同的类名，补全文本。
HTML
<div class="box1">
我是一个 div, 用来演示怪异盒子
</div>
<div class="box2">
我是一个 div, 用来进行做比拟
</div>CSS
*{margin:0;padding:0}
div{
width: 200px;
height:200px;
}
.box1{
background-color: orange;
box-sizing: border-box;
border:20px solid gray;
padding:20px;
margin:20px
}
.box2{background-color: yellow;}关上 CSS 文件，定义通配符选择器，申明款式 margin: 0，padding:0。勾销所有元素默认的边距和填充款式。
定义 div 选择器：申明款式：width: 200px，height: 200px。
定义 .box1 选择器，申明款式：background-color: orange。
定义 .box2 选择器，申明款式：background-color: yellow。
在浏览器里预览成果，两个有背景色彩的盒子就做好了。
给 box1 增加款式：box-sizing: border-box，触发怪异盒模型。持续增加款式 border: 20px solid gray，padding:20px。
能够看到，box1 增加了边框和内边距，然而大小并没有扭转，宽高依然是 200px。不言而喻，内容的大小被压缩了。
持续为 box1 增加款式：margin: 20px。
大家能够猜一下，外边距会不会持续压缩内容呢？
仔细观察一下，box1 地位产生了偏移，察看一下容器的大小，并没有变动。
所以，怪异盒模型宽度和高度的计算公式为：
盒子的宽度 = CSS 款式设置的 width 值 + 右边距 + 左边距
盒子的高度 = CSS 款式设置的 height 值 + 右边距 + 左边距
实际上，box-sizing 属性还有一个值：content-box，就是用来触发元素的规范盒模型。这也是元素盒模型的默认值，如果没有给元素设置 box-sizing 属性，容器的大小就依照规范盒模型来计算。
回到款式代码，将 box1 的 box-sizing 属性值批改为 content-box。
咱们发现，容器总宽高变为了 320px。
正文掉 box-sizing: content-box，容器的总宽高依然是 320px。
HTML
<!-- 答复问题: -->
<div class='box'></div>
<style>
div {
width:100px;
height:100px;
background-color:orange;
box-sizing:content-box;
border:10px solid gray;
}
.box {
width:200px;
padding:200px;
border-top:10px solid yellow;
margin:20px 30px;
}
</style>
文章配套视频链接：https://www.bilibili.com/vide…
