前言

盒模型相信大家对于这个概念非常是熟悉了，我们的排版以及样式都是在这个基础上进行的，所以掌握好它，才能让我们自己的编程技术更进一步。

盒模型

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

组成

盒模型由四部分组成：

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！！！