本文共 735 字，大约阅读时间需要 2 分钟。

盒模型由content+padding(内容与边框之间的距离)+border+margin(边框与外部元素的距离)组成。

标准文档流中，两个盒子，分别有上下外边距，竖直方向的margin不叠加，只取较大的值作为margin(水平方向的margin是可以叠加的)。

盒模型分为 ： W3C标准盒子 、IE盒子

W3C标准盒子（content-box）：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box。它所说的width一般只包含内容，不包含padding与margin，并且盒子的大小会以内容优先，自动扩展，子元素可以撑开父元素.

IE盒子（border-box）：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型，但是由于其自身的特殊性，手机页面中也有使用怪异盒模型。怪异盒模型中，父元素的盒模型确定，子元素无法撑开父元素的盒模型。

转载地址：https://blog.csdn.net/yyychocolate/article/details/108151762 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！