在网站布局中，咱们会应用各种各样的元素，这些元素实质上就是一个个小的容器，也称之为盒子，盒子外面能够搁置文本，图片，或者其余元素。

什么是 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...