杰人编程网

最里层为内宽width和内高height。

次一层为padding填充值，会增加元素的总宽高。

再次一层为border边框值，会增加元素的总宽高。

最外一层为margin值，不记入元素总宽高，是本元素距离外部的距离。

想象成为一个纸箱，最里层为width和height，在箱子外面塞了一层泡沫，是padding值，又给泡沫涂了颜色，是border，距离其他箱子的距离为margin值。

随着元素属性的不断增强，出现border—box属性，将padding吸收到元素内宽和内高中，（怪异盒模型）相当于把泡沫塞到箱子里，总宽高不变。出现outline边线属性，不站位，但可以实现border的展示。

CSS标准盒模型是元素布局的基础，是元素展示的基本模型。