为什么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;
}

这将在所有现代浏览器中产生类似于此的东西:

现在我知道这是符合标准的行为(正如我之前所知,但在本文中再次确认,我也知道如果我在内部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,因为这是有多宽设置为400像素的内容(文本)应该是.

这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模式搞砸了许多其他的东西,通常更好地处理w3c spec'd模型而不是尝试并创建修复其他"古怪"事物所需的所有css.

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

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