两种盒模型的区别

一、盒模型种类

1. content-box 内容盒模型
2. border-box 边框盒模型

二、区别

content-box

盒模型的宽度为width的宽度
公式为： width = 内容宽度

border-box

边框模型的宽度为内容的宽度，加上内边距的宽度，再加上边框的宽度
公式为： width = 内容的宽度 + padding + border

三、总结

• 盒模型在定义width宽度后，后面写padding和border是会改变盒子实际大小。如果需要保持固定大小，需要进行计算。
• 边框模型在定义width宽度后，不管怎么写padding和border宽度都固定在书写时的width。但是有可能导致内容被压缩，导致布局异常。