「这是我参与11月更文挑战的第十二天，活动详情查看：2021最后一次更文挑战」。

前言

盒模型相信大家对于这个概念非常是熟悉了，我们的排版以及样式都是在这个基础上进行的，所以掌握好它，才能让我们自己的编程技术更进一步，尤其是在根据UI同事的设计图的比例来固定我们的宽高时，有时候总会发现，他多了那么一块，看起来和原型图的怎么不一样啊，这就是在不同的盒模型下，width不一定等于width，他可能还包括边距以及边框。

学会今天我们说的盒模型，相信你在接下来面对ui的设计图的时候，肯定会变得游刃有余了。

盒模型

• 一种网页的设计模式，把网页看成是一个盒子。

组成

盒模型由四部分组成：

box = margin + border + padding + content

其中，除content属性外，margin、border和padding都有left、right、top和bottom四个属性。

• margin：外边距，盒子的外部区域，可以通过它设置相邻盒子间的距离。

• padding：内边距，盒子的内部区域，可以通过它设置content和border的距离。

• border：边框，盒子的边框。

• content：内容。

标准盒模型和怪异盒模型

由于历史的原因，盒模型分为标准盒模型和怪异盒模型。可以通过box-sizing属性来声明盒模型的类型。

• content-box：标准盒模型(默认)。

• border-box：怪异盒模型。

标准盒模型

标准盒模型是w3c的规范，由margin + border + padding + content组成，和上文提到的公式一样。

盒子的尺寸计算公式：

• 横向：margin-[left/right] + padding-[left/right] + border-[left/right] + width

• 纵向：margin-[top/bottom] + padding-[top/bottom]  + border-[top/bottom]+ height

• width = width

• height = height

怪异盒模型

怪异盒模型是IE的标准，有margin+content组成，与上述提到的公式一不同。

盒子的尺寸计算公式如下：

• 横向：margin-[left/right] + width(border-[left/right]和padding-[left/right])

• 纵向：margin-[top/bottom] + height(border-[top/bottom]和padding-[top/bottom])

• 横向：width = border + padding + width

• 纵向：height = border + padding + height

区别

• 标准盒模型的的width/height只包含content，不包含margin和padding。盒子的width/height包含border、padding和content。

好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！