也许是一个简单的问题，一个简单的答案。
今天我想知道以 px 或 100% 为单位的子宽度之间有什么区别，当子宽度与父宽度完全相同时。结果将与我知道的相同，但是最好使用什么？
例子;
div {width: 300px;}
h1 {width: 300px;} /*or..*/
h1 {width: 100%;}
<div>
<h1>Width of child</h1>
</div>
有关系吗？你用哪个？
问问题
480 次
4 回答
6
从视觉上看，您的两个示例看起来都一样。
但是对子元素使用 width: 100% 意味着如果你想改变两者的宽度，你只需要改变父元素的宽度。
另请注意， ah* 标签是块级元素，因此默认情况下，它已设置为 100% 宽度，因此在您的示例中，为 h1 设置任何宽度都是多余的。
于 2011-04-04T20:54:36.480 回答
1
如果您使用 100%，那么随着父级宽度的变化，随着时间的推移，这会减少一次修改。所以使用 100% 会让你的 CSS 更易于维护。
于 2011-04-04T20:55:23.607 回答
1
两者都有一个更好的选择：
{width:auto;}
...在子元素上。
对于您的示例，使用 {width:100%} 或 {width:300px}，如果您决定对子级 (h1) 应用填充或边框，那么它将溢出其容器之外。在您使用像素宽度时，您需要从孩子的宽度中减去 (padding-left + padding-right + border-left + border-right) 的总和，以使其恰好适合内部，舒适。在百分比宽度的情况下，您将不得不做一个简单的计算才能得出正确的百分比（并且可能仍然有点偏离）。
But {width:auto} will automatically account for padding and border, and its computed width will be the appropriate amount less than the container, so that the outer edge of the border on H1 stays just within the content area of your div.
于 2011-04-04T21:14:37.203 回答
0
另一个例子：它可能会对您实际应用固定大小背景图像的元素产生影响。在这种情况下使用 px ，因此对布局的修改不会破坏您的图像。正如 Babak 已经说过的，它只与以后的修改有关。
于 2011-04-04T20:59:55.047 回答