为什么CSS宽度和高度属性不能调整填充？

Question

首先要设置一下场景：

HTML

<div id="container">
    <div id="inner">test</div>
</div>

CSS

#container {
    width:300px;
    height:150px;
    background-color:#d7ebff;
}

#inner {
    width:100%;
    height:100%;
    padding:5px;
    background-color:#4c0015;
    opacity:.3;
}

这将在所有现代浏览器中产生类似于此的内容：

现在我知道这是符合标准的行为（正如我之前所知，但在this post中再次确认，我也知道如果我在内部CSS声明中包含此代码：

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box

...它会采用“边框”模式并获得对我来说更直观的行为，但我发现自己试图在逻辑上证明为什么这就是它的原因并且我无法理解这样做。

似乎（在事物的表面上）对于我来说更合乎逻辑的是内盒总是将容器填充到容器宽度的正好100％，而不管内盒的填充或边框。当我试图将textarea的宽度设置为100％有边框或类似4px内部填充的东西时，我一直遇到这个问题...... textarea总是会溢出容器。

所以我的问题是......在设置宽度时，设置默认行为以忽略元素的边框和填充的原理是什么？

Answer 1

CSS使用盒子模型的原因：

+---------------------
|       Margin
| +-------------------
| |     Border
| | +-----------------
| | |   Padding
| | | +---------------
| | | | Width x Height

是因为CSS是文档样式语言。它（最初）设计时考虑了研究论文和其他正式文档，而不是制作漂亮图形的方法。因此，模型围绕内容，而不是容器。

CSS不是一种编程语言，它是一种造型语言。它没有明确告诉文档应该如何显示，它建议浏览器应该遵循的一些指导原则。所有这些都可以被实际的编程语言覆盖和修改：JavaScript。

回到内容模型的想法，考虑以下CSS：

p
{
  background-color: #EEE;
  border: 1px solid #CCC;
  color: #000;
  margin: 10px;
  padding: 9px;
  width: 400px;
}

height未指定，因为内容定义了高度，它可能很长，可能很短，但它是未知的，并且不重要。 width设置为400px，因为内容（文本）应该有多宽。

padding只是一种扩展背景颜色的方法，这样文字就可以远离边缘清晰易读，就像在一张纸上书写/打印时留下空间一样。

border是围绕某些内容以区别于其他背景，或在各种元素之间提供边框（图）的方法。

margin告诉段落在边缘之间留出一些空间，并且利用边缘折叠，每个组将保持均匀间隔，而不必为第一个或最后一个元素指定不同的边距。

为了保持流动性，width默认为auto，这意味着宽度将尽可能宽：

1. 没有不合理地压缩内容
2. 没有填充超出其容器

当然，在边缘情况下，填充将延伸到其容器之外，因为内容可能会被挤压。 这完全取决于内容。

Answer 2

您可能需要在w3c上查看以下内容：http://www.w3.org/TR/CSS21/box.html

盒子模型的高度和宽度属于元素的内容区域。填充在该区域之外，这就是为什么你看到内盒溢出外层的原因。

填充后出现边框，如果有的话。然后保证金适用于边界之外。这意味着元素实际宽度定义为：宽度+填充+边框+边距。

实际上，你已经将css定义为内框有300px乘150px的内容区域加上额外的5px填充，超过了产生310px乘160px的框。

就个人而言，我同意宽度应包括填充。但是，这不是规范所说的。

作为旁注，quirks模式确实包含实际宽度中的填充（和边框）。不幸的是，quirks模式搞砸了许多其他的东西，通常更好地处理w3c spec'd模型而不是尝试创建修复其他“古怪”事物所需的所有css。

另一个网站（谁同意你和我）在这里：http://www.quirksmode.org/css/box.html

他们提到CSS3包含了box-sizing声明（如你所见），它可以让你更好地控制使用哪个盒子模型。看起来几乎每个人（IE8，Chrome，Firefox）都支持那些好的。

Answer 3

为了回答你的问题，我认为逻辑是所有关于内容的;如果您指定维度，则这些是内容将获得的维度。

但最终它只是一个选择，是我们必须合作的。

Answer 4

看下面的图片：

现在考虑将宽度和高度值设置为100％时会发生什么 - 填充和边框是否会从这张图片中神奇地消失？作为开发人员，您将如何以合理的方式处理它？<​​/ p>

width and height is width and height, border and padding is something else - 对我而言，它不再合乎逻辑。

另一方面

width and height is width and a height, but sometimes when you choose to set them to 100% they are also border and padding - 现在这对我没用。

然而，一个人的逻辑可能是另一个人的废话，所以我不知道这是否会对你有帮助;）

Answer 5

虽然这可能不是CSS盒子模型的初衷，但另一个好处是如果你想要一些带有偏移背景图像的东西（例如图像位于文本的左侧或右侧）。然后，您可以将填充指定为背景图像的宽度，以使文本不与其重叠，并仍指定文本本身的宽度。例如：

.imageDiv{
width:200px;
background-image:url('someimage.png') /*this image is 50 px wide*/
background-repeat:no-repeat;
padding-left:50px;
}

现在，任何输入到课程imageDiv的div中的文字都会显示文字左侧的图像，并且有任何重叠。