这是一个创建于 1827 天前的主题，其中的信息可能已经有所发展或是发生改变。
CSS2.1 中提出了盒模型的概念，盒模型总结概括了所有元素的基本特征，那么盒模型究竟是一个什么样的概念呢，我们可以用过下面的链接来访问其中图片
从图片来看，一个完整的盒模型有上面四部分组成，即 border(边框)、margin(外边距)、padding(内边距)、element(元素)。简而言之，任何元素都具有上面四个特征。
在计算盒模型的高度宽度时候有两个计算标准分别是：标准盒模型、IE 盒模型
标准盒模型
该模型宽度和高度仅仅是其中 element(元素)的宽度与高度，不包括内外边距以及边框的宽度与高度。
上面这样图就是标准盒模型的计算方式，其中 width、height 指的是 element 的宽度和高度。
IE 盒模型
早起的 IE 浏览器（ IE6.0 以前）使用的盒模型与其他浏览器有差异，我们称之为 IE 盒模型。
IE 盒模型与标准盒模型的不同在于，该模型的宽度与高度是将元素与内外边距、边框累加起来的总和才是整个模型占用的宽度和高度。
简而言之就是 width = element + padding + margin + border
CSS 中也支持手动设置模型类型， 即 box-sizing 属性，content-box 为标准盒模型，border-box 为 IE 盒模型
设置之后宽度高度遵循上方的规则。
/* 标准盒模型 */
box-sizing:content-box;
/*IE 盒模型*/
box-sizing:border-box;
外边距合并
当两个盒模型相遇时，其中垂直相遇的部分的外边距（ margin ）将会被合并，形成一个新的外边距， 新的外边距的高度等于两个发生合并的外边距的高度中的较大者。
下面的图可以做一个很好的说明。
上图中两个盒模型，上面的有一个 20px 的 margin-bottom，下面的有一个 10px 的 margin-top，当两个模型垂直相遇时，相遇的部分会被合并，形成一个新的外边距，高度为 20px。
这里可以看到两个 element 之间的 margin 是 20px，而不是想象中的 30px。
当一个元素包含在另一个元素中时，它们的上和 /或下外边距也会发生合并。如下图所示
 |
1
powertoolsteam OP 本文由葡萄城发布，转载请注明出处：葡萄城官网（ https://www.grapecity.com.cn/developer ），葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
|
 |
2
Blacate 2019-04-19 11:30:29 +08:00  1
IE 盒模型 width = element + padding + border 不包括 margin 吧
错误这么明显还写教程。。可怕。。 |
|
3
powertoolsteam OP @Blacate 感谢提醒，已更正，IE 盒模型很久不用，有些概念生疏了
|
|
4
powertoolsteam OP 更正一下，IE 盒模型的宽度与高度的计算不包括外边距，但包括内边距和边框，再次感谢 Blacate 同学的指正
|
Select Language