为什么CSS宽度和高度属性不能调整填充？ [英] Why do the CSS width and height properties not adjust for padding?

问题描述

因此，首先需要一点肉来设定场景：

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

这将在所有现代浏览器中生成类似这样的东西：

现在我知道这是符合标准的行为（如我之前所知，但在

  box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 -webkit-box-sizing：border-box 
  

...它将采用边框盒模型，并获得看起来更直观的行为我，但我只是发现自己试图在逻辑上证明为什么这是它的方式的理由，我无法做到。

看起来的事情）更合乎逻辑的内部框总是填充容器正好100％的容器的宽度，而不管内部框的填充或边框。我遇到这个问题所有的时间，当我试图将textarea的宽度设置为100％，有一个边框或像4px内部填充... textarea将总是溢出容器。

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

解决方案

CSS使用框模型的原因如下：

  -------------------- 
 |保证金
 | + ------------------- 
 | |边框
 | | + ----------------- 
 | | | Padding 
 | | | + --------------- 
 | | | |宽度x高度
  

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

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

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

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

t指定，因为内容定义高度，它可能很长，它可能很短，但它是未知的，而且不重要。 width 设置为400px，因为这是内容（文本）的宽度。

padding 只是扩展背景颜色的一种手段，因此文字可以从边缘清晰易读，就像在写入/打印时留下空间一样

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

margin 边缘之间的空间和边缘折叠，每个组将保持均匀间隔，而不必为第一个或最后一个元素指定不同的边距。

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

$

$ b
$ b

当然，在边缘情况下，填充将延伸超出其容器，因为内容可能被挤压。 这是关于内容。

So first a bit of meat to set the scene:

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 will produce something that looks like this in all modern browsers:

Now I know this is the standards-compliant behavior (as I knew before, but reconfirmed in this post, and I also know that if I include this code in the inner CSS declaration:

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

...it will adopt the "border-box" model and get the behavior that seems more intuitive to me, but I just found myself trying to logically justify the reasoning behind why this is the way it is and I was unable to do it.

It seems (on the surface of things) more logical to me for the inner box to always fill the container to exactly 100% of the container's width, regardless of the padding or border of the inner box. I run into this problem all the time when I'm trying to set the width of a textarea to 100% that has a border or something like a 4px interior padding...the textarea will always overflow the container.

So my question is...what is the logic behind setting the default behavior to ignore the border and padding of an element when setting its width?

解决方案

The reason CSS uses the box model as:

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

Is because CSS is a document styling language. It was (originally) designed with research papers and other formal documents in mind, not as a way to make pretty graphics. As such, the model revolves around the contents, not the container.

CSS isn't a programming language, it's a styling language. It doesn't explicitly tell the document how it should be displayed, it suggests some guidelines the browser should follow. All of these can be overwritten and modified by an actual programming language: JavaScript.

Going back to the content-model idea, consider the following CSS:

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

height isn't specified, because the content defines the height, it may be long, it may be short, but it's unknown, and unimportant. The width is set to 400px because that's how wide the content (text) should be.

The padding is just a means of extending the background color so that the text can be nicely legible away from the edges, just like how you leave space when writing/printing on a sheet of paper.

The border is a means of surrounding some content to differentiate it from the other backgrounds, or to provide a border (go figure) between various elements.

The margin tells the paragraph to leave some space between edges, and with margin-collapsing, each group will remain evenly spaced without having to specify a different margin for the first or last element.

To maintain fluidity, width defaults to auto, which means the width will be as wide as possible:

1. without squishing the content unreasonably
2. without the padding extending beyond its container

Of course, in edge cases, the padding will extend beyond its container because the content might get squished. It's all about the content.

这篇关于为什么CSS宽度和高度属性不能调整填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！