CSS子宽度100％或px问题

也许一个简单的问题，一个简单的答案。今天我想知道当孩子的宽度与父母的宽度完全相同时，px或100％的子宽度之间有什么区别。结果将与我所知的相同，但最好使用什么？例;

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

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

有关系吗？你用哪个？

已邀请:

4 个回复

篮肥炼皖

在视觉上，您的两个示例看起来都是一样的。但是对于子元素使用width：100％意味着如果您想要更改两者的宽度，则只需要更改父元素的宽度。另请注意，h *标记是块级元素，因此，默认情况下，它已设置为100％宽度，因此在您的示例中，为h1设置任何宽度都是多余的。

细瑞

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

伐教爸

两者都有更好的选择：

 {width:auto;}

......关于子元素。对于您的示例，使用{width：100％}或{width：300px}，如果您决定对子项（h1）应用填充或边框，则它将在其容器外溢出。在您使用像素宽度时，您需要从子宽度中减去（填充左侧+填充右侧+边框左侧+右侧边框右侧）的总和，以使其恰好适合内部，舒适。在百分比宽度的情况下，您将不得不进行一个有意义的计算以得出正确的百分比（并且可能仍然是一点点）。但是{width：auto}将自动考虑填充和边框，并且其计算的宽度将是小于容器的适当数量，因此H1上边框的外边缘仅保留在div的内容区域内。

死狸蔽垂藐

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

要回复问题请先登录或注册

CSS子宽度100％或px问题

4 个回复

发起人

maintainability

code_maintainability

问题状态

CSS子宽度100％或px问题

与内容相关的链接

4 个回复

发起人

maintainability

code_maintainability

问题状态