CSS儿童宽度100％或px问题

也许一个简单的问题，一个简单的答案。CSS儿童宽度100％或px问题

今天我不知道是什么在像素或100％的孩子宽度之间的差异，当孩子将是完全相同的宽度父。结果将是我所知道的，但最好使用什么？

示例;

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

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

重要吗？你使用哪个？

来源

2011-04-04 Basic

在视觉上，您的两个例子看起来是一样的。

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

还要注意，H *标签是块级元素，因此，在默认情况下，它已经在你的榜样设置为100％的宽度，因此，设置任何宽度H1是多余的。

来源

2011-04-04 20:54:36

谢谢你。正是我所需要的，我会尽可能地接受它作为答案。 – Basic 2011-04-04 20:58:29

不，块级元素的典型浏览器默认值是{width：auto;}，它的功能与百分比宽度不同（更好，IMO - 请参阅我的答案）。顺便说一句，默认样式属性是浏览器特定的，而不是正式标准的一部分;尽管有些属性有W3C推荐的*默认值，请参阅http://www.w3.org/TR/CSS2/sample.html – Faust 2011-04-05 07:36:15

是的，很好的说明，Snake。 – 2011-04-05 13:00:46

如果使用100％，那么这是随着时间的变化母公司的宽度少了一个修改。所以使用100％可以让你的CSS更易于维护。

来源

2011-04-04 20:55:23

我不同意。 100％意味着孩子的内容区域是父母的内容区域的100％ - 所以如果您为孩子添加边框或填充，整个对象（内容区域+边框+填充）将需要突出到父级之外。这是一个常见的CSS错误。一旦相关浏览器完全支持CSS3 box-sizing，您将可以应用{box-sizing：border-box}和*仅当时*将百分比宽度维护得很好。这是一个方法：http://caniuse.com/css3-boxsizing – Faust 2011-04-05 07:15:57

又如：它可以使哪个元素你会实际应用一个固定大小的背景图像的差异。在这种情况下使用px，因此布局上的修改不会破坏图像。正如Babak已经说过的那样，它只适用于以后的修改。

来源

2011-04-04 20:59:55 thmshd

还有就是既是更好的选择：

{width:auto;}

...的子元素。

对于您的示例，如果您决定将填充或边框应用于子项（h1），则{{width：100％}}或{width：300px}将会在其容器外溢出。在你使用像素宽度的时候，你需要从子宽度中减去（padding-left + padding-right + border-left + border-right）的总和，使它适合内部，贴合。在百分比宽度的情况下，您必须进行一次适当的计算才能得出正确的百分比（并且可能仍然有点关键）。

但是{width：auto}会自动计算填充和边框，并且其计算的宽度将会小于容器的适当量，以便H1上边框的外边缘保持在您的内容区域内DIV。

来源

2011-04-04 21:14:37 Faust

顺便说一句：“auto”是大多数浏览器中大多数块级元素的默认宽度。 – Faust 2011-04-04 21:18:08

CSS儿童宽度100％或px问题

回答

相关问题