CSS子宽度100％或px问题

Question

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

我今天想知道当孩子的宽度与父母的宽度完全相同时，px或100％的子宽度之间有什么区别。结果将与我所知的相同，但最好使用什么？

实施例

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

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

重要吗？你用哪个？

Answer 1

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

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

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

Answer 2

如果您使用100％，那么随着父级宽度的变化，这会减少一次修改。因此，使用100％可以使CSS更易于维护。

Answer 3

两者都有更好的选择：

 {width:auto;}

...关于子元素。

对于您的示例，使用{width：100％}或{width：300px}，如果您决定对子项（h1）应用填充或边框，则它将在其容器外溢出。在您使用像素宽度时，您需要从子宽度中减去（填充左侧+填充右侧+边框左侧+右侧边框右侧）的总和，以使其恰好适合内部，舒适。在百分比宽度的情况下，你必须进行一个有意义的计算才能得出正确的百分比（并且可能仍然是一点点）。

但{width：auto}会自动考虑填充和边框，其计算宽度将是小于容器的适当数量，因此H1上边框的外边缘仅保留在div的内容区域内

Answer 4

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