什么是盒模型

盒模型简单的来说就是一个盒子，它从内到外由 外边距margin border边界 padding内边距 内容尺寸width/height 四种基本样式组成的。它的内容尺寸大小由宽高决定，它的盒模型尺寸大小由宽高和padding，margin决定，而它的盒模型区域由宽高，padding，border，margin决定的。

image.png

盒模型分为标准盒模型和怪异盒模型:
1.标准盒模型
标准盒模型：盒模型大小=width+height,浏览器默认的是标准盒模型。
2.怪异盒模型
怪异盒模型:盒模型大小=width+height+padding+border;
我举了一个例子来演示标准模式与怪异模式的差别，下面是演示代码：

标准模式下盒模型如下图

11.png

content=width+height

怪异模式下盒模型如下图

11.png

content=width+height+padding+border
今天就简单介绍到这。

小编能力有限，存在不足或不全，请大家指出，共同学习与交流。