Css 填充会增加div的宽度/高度吗？ *{边距：0；边框：0；填充：0；} div{高度：500px；} #容器{宽度：1000px；背景色：#000；} #第一列{浮点：左；填充：10px；宽度：500px；背景色：#234；} #第二列{浮点：左；填充：10px；宽度：500px；背景色：#345；}_Css

Css 填充会增加div的宽度/高度吗？ *{边距：0；边框：0；填充：0；} div{高度：500px；} #容器{宽度：1000px；背景色：#000；} #第一列{浮点：左；填充：10px；宽度：500px；背景色：#234；} #第二列{浮点：左；填充：10px；宽度：500px；背景色：#345；}

css

Css 填充会增加div的宽度/高度吗？ *{边距：0；边框：0；填充：0；} div{高度：500px；} #容器{宽度：1000px；背景色：#000；} #第一列{浮点：左；填充：10px；宽度：500px；背景色：#234；} #第二列{浮点：左；填充：10px；宽度：500px；背景色：#345；},css,Css,确实违反直觉。宽度是内容可以填充的宽度，而不是由边框分隔的框的宽度。表示填充和边框不计入为框设置的宽度。所以他们增加了它的宽度现代浏览器支持CSS3使宽度表示内容、填充和边框的总宽度（默认值当然是内容框，触发上述行为）.也许我误解了，但我认为您可以通过对div使用width:auto而不是width:100%来解决您的问题；附言：我知道这篇文章很老了，但也许仍然有用…呃，有问题吗？还有什么浏览器（IE就是因为这个而臭名昭著的，它有一个“破烂”的盒子模型）。所有浏览器都会在元素的宽度/高度上添

确实违反直觉。

宽度是内容可以填充的宽度，而不是由边框分隔的框的宽度。

表示填充和边框不计入为框设置的

宽度。所以他们增加了它的宽度
现代浏览器支持CSS3使宽度
表示内容、填充和边框的总宽度（默认值当然是内容框
，触发上述行为）.
也许我误解了，但我认为您可以通过对div使用width:auto
而不是width:100%来解决您的问题；
附言：我知道这篇文章很老了，但也许仍然有用…
呃，有问题吗？还有什么浏览器（IE就是因为这个而臭名昭著的，它有一个“破烂”的盒子模型）。所有浏览器都会在元素的宽度/高度上添加填充、边距和边框这是一个众所周知的“特性”。你的问题是什么？我知道这是一个老生常谈的话题，一个被打得要死的话题，但是为什么内容框模型不包括填充？如果我可以特别控制div的大小，并且仍然在其中添加填充，那么创建精确的布局就会容易得多。此外，我似乎在IE10或Chrome中都没有任何运气，因为它具有“框大小”属性。对不起，如果我听起来很沮丧。这不是你的错。@Mike U:那是因为内容不能按定义显示在填充区域中。Firefox有一个实验性的填充框值，该值在规范中提到，但存在风险，在其他地方没有实现。如果你不能在IE10或Chrome上使用box Size，那么肯定还有其他因素在起作用，因为据我所知，它们都支持Unfixed。我理解box模型是如何工作的。大多数人只是好奇为什么会这样。这似乎太不直观和不合逻辑了。自从我上次发表评论以来，我已经使box model属性开始工作。似乎您不能将其应用于特定的类。我得到它的唯一方法就是把它应用到“*”。经典的方式似乎不合逻辑。如果我想要屏幕的40%，并且有一个4px的填充，那就不可能用经典的模型做正确的布局。我想只是一个抱怨。至少我现在知道如何避开它了。@MikeU这就是为什么CSS3和CSS2不一样；另外，众所周知，CSS已经崩溃
<html>
<head>
<style>
    * { margin:0; border:0; padding:0; }
    div { height:500px; }
    #container { width:1000px; background-color:#000; }
    #column-one { float:left; padding:10px; width:500px; background-color:#234; }
    #column-two { float:left; padding:10px; width:500px; background-color:#345; }
</style>
</head>
<body>
<div id="container">
    <div id="column-one">
    </div>
    <div id="column-two">
    </div>
</div>
</body>
</html>