CSS盒模型简述

本文只是对盒模型进行简述，太深层次的概念和技术不做探讨。

什么是盒模型？

盒模型就是元素生成的一个矩形区域。它包括了四个部分：

• margin 外边距区域（边框外的区域，外边距是透明的）
• border 边框区域
• padding 内边距区域
• content 内容区域 （装文字图片等等乱七八糟的地方）

是的没错，margin外边距也是盒模型的一部分，虽然我们通常使用它来控制两个盒子之间的距离。

盒模型分类

盒模型有两种

• 标准盒模型（content-box）
• 怪异盒模型/IE盒模型（border-box）

标准盒模型

标准盒模型下，我们给元素设置的width、height是内容区域的宽高，没有包括padding区域和border区域。

所以元素的实际大小是由盒子的width、height、padding、border一起决定的。

如果给一个设置了宽高的盒子设置padding或者border，盒子就会被撑大。

举个例子：

我们现在有个盒子宽高是100px，我们加一点文字。现在它是这样：

我们给这个盒子设置一个padding内边距50px；

盒子被撑大了！？在实际开发的时候这种特性很明显不利于我们计算。

怪异盒模型/IE盒模型

怪异盒模型可能是IE浏览器为前端发展做出的唯一一件好事。抛开IE6等老版本IE浏览器对前端开发人员的折磨不谈，IE浏览器推出的怪异盒模型，确实为我们带来了方便。

在怪异盒模型下，你设置的width、height就是这个盒子的真实宽高，无论你怎么去搞它的padding和border值，都不会影响盒子的实际大小。

还是这个盒子，我们设置为怪异盒模型：

box-sizing:border-box;

我们设置width、height都为100px。此时我们再给它加padding和border。

内边距也有，边框也有，但是盒子整体的大小还是我们给它设置的100px。

总结对比

标准盒模型 ： CSS设置的width和height只是content区域的宽高，没有包括padding和border。盒子真实的大小包括了：content + padding + border + margin

怪异盒模型 ：CSS设置的width和height包括了content+padding+border。盒子的真实大小就是width + margin。

这里所说的盒子大小是盒模型的大小，所以是包括了margin的。