html - 物理宽度与内容宽度？

Question

我正在学习 CSS，但我在物理宽度和内容宽度的概念上遇到了麻烦。网站似乎引用了它们，但从未真正解释过它们之间的区别。

我知道这与 CSS 盒子模型有关，如果其他人可以帮助我，那就太好了。

例如，如果在 css 中给出以下内容：

div {
width: 400px;
padding-left: 20px;
padding-right: 10px;
margin: 0px 10px;
border: 2px solid pink;
}

物理宽度包含什么？内容宽度是什么？

Answer 1

• “宽度”是指内容区域；把它想象成你盒子的“内部”。
• “填充”是额外的，添加在内容区域之外。它可以是 0。
• “边框”是额外的，在填充之外，如果有的话。
• “边距”又是额外的，在边界之外，如果有的话。

所以，如果你有宽度 400，填充左边 20，右边 10，边距 20（每边 10）和 4 像素的边框（每边 2），你的整个盒子将是400+20+10+20+4=454px

所以，如果你想把它放到一个只有 400 像素宽的空间里，你需要在某个地方减少一些东西；例如，您可以将宽度减少 54 像素，使总宽度为 400。

---

请注意，这不适用于“怪癖模式”，它使用略有不同的盒子模型，如肖恩的回答中所述。这仅适用于没有适当文档类型的 IE；通常希望避免怪癖模式。

Answer 2

这取决于浏览器使用的盒子模型。两种可能性是：

• content-box: 元素的宽度不包括padding 和border 属性。这是除 IE 以外的所有东西的默认模型，在 quirks 模式下。
• border-box: 元素的宽度包括内边距和边框。

在较新的浏览器中，您可以使用该box-sizing属性选择要使用的浏览器。

因此，给定您在content-box模型中提供的代码，宽度div将为：

  400  # from width
+  20  # from padding-left
+  10  # from padding-right
+   4  # from the left and right borders
+  20  # from the left and right margins
-----------------------------------------
Physical width = 454
Content width  = 400

虽然border-box模型会将宽度设置div为：

  366  # the declared width is shrunk by the amount of padding and border
+  20  # from padding-left
+  10  # from padding-right
+   4  # from the left and right borders
+  20  # from the left and right margins
-----------------------------------------
Physical width = 420
Content width  = 366

有关更多信息，请参阅Quirk's Mode 关于该主题的优秀文章。