Question

我正在学习CSS，我遇到了物理宽度和内容宽度概念的问题。网站似乎是指它们，而没有真正解释它们之间的差异。

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

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

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

物理宽度包含哪些内容？什么内容宽度？

Answer 1

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

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

所以，如果你试图将它放入一个只有400像素宽的空间，你需要减少某些地方的东西;例如，你可以将宽度减少54像素，使得总数达到400。

请注意，这不适用于“Quirks Mode”，它使用略有不同的盒子模型，如Sean的回答中所述。这仅适用于没有正确doctype的IE;通常希望避免怪癖模式。

Answer 2

这取决于浏览器使用的box model。两种可能性是：

content-box：元素的宽度排除填充和边框属性。这是除了IE在怪癖模式下的所有内容的默认模型。
border-box：元素的宽度包括填充和边框。

在newer browsers中，您可以使用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's excellent article on the subject。

物理宽度与内容宽度？

2 个答案: