CSS盒模型

什么是盒模型

CSS盒模型是CSS技术所使用的一种思维模型，在HTML页面中的所有元素都可以看成是一个盒子。它包括 实际内容、内边距、外边距和边框 四个部分。 

盒模型包含的属性

盒模型中主要的属性就5个：width、height、padding、border、margin。

盒模型的类型

1.标准盒模型

元素总宽度 = content + margin + padding + border

即：内容的width + margin(左右) + padding(左右) + border(左右)

2.IE盒子模型（怪异盒模型）

元素总宽度 = content + margin

即内容的width + margin(左右)（这里的width包含了padding(左右)和border(左右)的值）

控制盒模型的模式

在不设置的情况下，默认为 标准盒模型。

标准盒模型：box-sizing: content-box;

IE模型：box-sizing: border-box;