box-sizing （怪异盒模型）

在CSS中，box-sizing: border-box; 的设置确实改变了元素盒模型的计算方式，但它对 margin 没有直接影响。margin 仍然位于元素的外部，不受 box-sizing 属性的影响。

解释

• box-sizing 属性：这个属性决定了元素的宽度和高度如何计算。当设置为 border-box 时，元素的宽度和高度包括了内容（content）、内边距（padding）和边框（border），但不包括外边距（margin）。

• margin：外边距是元素框的最外层。它位于边框之外，是透明的，不会占据空间（但从布局的角度来看，它确实存在并影响布局），因为它决定了元素与其他元素之间的空间。

示例

假设你有一个元素，其CSS样式如下：

	.element {
	width: 100px;
	height: 100px;
	padding: 20px;
	border: 5px solid black;
	margin: 10px;
	box-sizing: border-box;
	}

• 没有 box-sizing: border-box;：元素的宽度将是 100px + 20px(左padding) + 20px(右padding) + 5px(左边框) + 5px(右边框) = 150px。高度同理，也会增加。此外，外边距 margin: 10px; 会额外增加元素与其他元素之间的空间，但这与元素的尺寸计算无关。

• 有 box-sizing: border-box;：元素的宽度仍然是 100px，但这 100px 现在包括了内容、内边距和边框。外边距 margin: 10px; 仍然位于元素的外部，不影响元素的尺寸计算，但会影响布局。

结论

margin 总是位于元素的外部，不受 box-sizing 属性的影响。box-sizing: border-box; 只是改变了元素内部（内容、内边距、边框）如何与指定的宽度和高度相互作用的方式。