CSS 子宽度 100% 或 px 问题答案

【问题标题】：CSS child width 100% or px questionCSS 子宽度 100% 或 px 问题
【发布时间】：2011-04-04 20:52:00
【问题描述】：

也许是一个简单的问题，答案很简单。

今天我想知道以 px 为单位的子宽度或 100% 之间的区别是什么，当子宽度与父宽度完全相同时。结果将与我知道的相同，但最好使用什么？

示例；

div {width: 300px;}
h1 {width: 300px;} /*or..*/
h1 {width: 100%;}

<div>
<h1>Width of child</h1>
</div>

这有关系吗？你用的是哪个？

【问题讨论】：

标签： css maintainability code-maintainability

【解决方案1】：

从视觉上看，您的两个示例看起来都一样。

但是对子元素使用 width: 100% 意味着如果你想改变两者的宽度，你只需要改变父元素的宽度。

另请注意，h* 标签是块级元素，因此默认情况下，它已设置为 100% 宽度，因此在您的示例中，为 h1 设置任何宽度都是多余的。

【讨论】：

谢谢你。正是我需要的，我会尽可能地接受它作为答案。
不，块级元素的典型浏览器默认值是 {width: auto;}，它的功能与百分比宽度不同（而且更好，IMO - 请参阅我的答案）。顺便说一句，默认样式属性是特定于浏览器的，而不是正式标准的一部分；虽然有些属性有 W3C-推荐默认值，但请参阅w3.org/TR/CSS2/sample.html

【解决方案2】：

如果您使用 100%，那么随着父级宽度的变化，随着时间的推移，这会减少一次修改。所以使用 100% 会让你的 CSS 更易于维护。

【讨论】：

我不同意。 100% 表示子内容区域是父内容区域的 100%——因此，如果您为子内容添加边框或填充，则整个对象（内容区域 + 边框 + 填充）将需要突出到父内容区域之外。这是一个常见的 CSS 错误。一旦相关浏览器完全支持 CSS3 box-sizing，您就可以应用 {box-sizing: border-box} 并且只有在那个时候才能保持百分比宽度。那是一段路：caniuse.com/css3-boxsizing

【解决方案3】：

两者都有更好的选择：

 {width:auto;}

...在子元素上。

对于您的示例，使用 {width:100%} 或 {width:300px}，如果您决定随后对子 (h1) 应用填充或边框，那么它将溢出其容器之外。在您使用像素宽度时，您需要从孩子的宽度中减去 (padding-left + padding-right + border-left + border-right) 的总和，以使其恰好适合内部，舒适。在百分比宽度的情况下，您将不得不做一个奇怪的计算来得出正确的百分比（并且可能仍然有点偏）。

但是 {width:auto} 会自动考虑内边距和边框，它的计算宽度会小于容器的适当数量，因此 H1 上边框的外边缘正好在 div 的内容区域内.

【讨论】：

顺便说一句：“auto”是大多数浏览器中大多数块级元素的默认宽度。

【解决方案4】：

另一个例子：它可能会对您实际应用固定大小背景图像的元素产生影响。在这种情况下使用 px ，因此对布局的修改不会破坏您的图像。正如 Babak 已经说过的，它只与以后的修改有关。

【讨论】：