为什么CSS的width和height属性不适合填充？

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;
}

这将在所有现代浏览器中生成如下所示的内容：

CSS内部宽度测试，显示内箱超出了容器

现在，我知道这是符合标准的行为（正如我之前所知道的，但在本文中再次确认，并且我还知道是否在内部CSS声明中包含以下代码：

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

…它将采用“边界框”模型，并得到对我来说似乎更直观的行为，但我只是发现自己试图从逻辑上论证为什么这样做是合理的，而我却无法做到。

对于我来说（似乎从表面上看），使内盒始终将容器完全填充到容器宽度的100％，而不管内盒的填充或边框如何。当我尝试将textarea的宽度设置为100％且具有边框或类似4px的内部填充的内容时，我总是遇到这个问题。textarea总是会溢出
容器。

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

Answer 1

CSS使用box模型的原因是：

+---------------------
|       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设置，因为这是有多宽400像素的内容（文本）应该是。

该padding仅仅是延长的背景颜色，使的手段文字可以从边缘清晰漂亮了，就像你如何留出空间上的一张纸上写时/打印。

这border是一种围绕某些内容以使其与其他背景区分开的方法，或在各种元素之间提供边框（图形）。

该margin通知段落离开边缘之间一定的空间，并与容限塌陷，每组将保持均匀，而不必隔开指定不同的余量为所述第一或最后一个元素。

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

不会不合理地压缩内容没有填充物超出其容器当然，在边缘情况下，填充内容将扩展到其容器之外，因为内容可能会被压缩。这都是关于内容的。