为什么百分比宽度工作，即使没有给出包含块的明确宽度值？

根据height的规范，元素的包含框需要有一个明确的height，以使百分比高度在元素上工作（即在所有父包含框中使用的数值为100%高度）。为什么百分比宽度工作，即使没有给出包含块的明确宽度值？

但是，为什么相同的规则似乎不适用于百分比width？当我设置一个百分比width在一个包含框没有明确的width的元素时，它似乎仍然会改变元素的宽度。（见实施例）

.first { 
 
    background-color: teal; 
 
} 
 
.second { 
 
    background-color: gold; 
 
    width: 30%; /* the '.second' box becomes narrower! */ 
 
    height: 40%; /* <-- doesn't have any effect   */ 
 
}

<div class="first"> 
 
    "" 
 
    <div class="second"> 
 
    "" 
 
    </div> 
 
</div>

来源

2015-02-05 rrazd

所以你想知道为什么你不必为div等块级元素设置宽度？ – arnolds 2015-02-05 20:46:18

是的，宽度为50％的嵌套div如何知道它应该占用50％的值？由于包含块没有明确的宽度设置（即没有宽度100％来源于主体，也没有明确的px宽度） – rrazd 2015-02-05 20:50:09

这是因为它是一个块级元素，HTML中的所有块级元素的默认宽度为100％为什么他们跨越浏览器窗口的宽度。内联元素如图像和链接不会，它们只是扩展到它们的内容长度。 – arnolds 2015-02-05 20:57:55

正常流程中未被替换的块级元素取其父级的width。这个是lie-to-children！

为了理解发生了什么，我们应该从如何计算width of a non-replaced block-level element开始。

“保证金左” +“左边框宽度” +“填充左：

10.3.3 Block-level, non-replaced elements in normal flow

下面的约束必须在其他属性中使用的值之间保持“+‘宽度’+ ‘填充右’+‘右边框宽度’+‘余量 - 右宽度‘被设置为’自动’ containing block

[...]如果=宽度” '，任何其他的'自动'值将变为'0' 和'宽度'来自相等的结果。

由于这样的事实：width属性的初始值是auto，块级元素将是相同的作为其包含块的width。

<html>是一个块级元素，它住在initial containing block。

初始包含块是一个矩形框，其中takes the width of the viewport。因此，<html>元素的宽度将等于视口的宽度。

另一方面，<body>元素的包含块由<html>生成。因此它们也会有相同的宽度。

<body>本身为其块级子级建立一个包含块。这就是为什么正常流程中的<div>元素将占用视口的宽度。

W3C更好表示它：

在没有定位，下面文档中的包含块（CB）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<HTML> 
    <HEAD> 
     <TITLE>Illustration of containing blocks</TITLE> 
    </HEAD> 
    <BODY id="body"> 
     <DIV id="div1"> 
     <P id="p1">This is text in the first paragraph...</P> 
     <P id="p2">This is text <EM id="em1"> in the 
     <STRONG id="strong1">second</STRONG> paragraph.</EM></P> 
     </DIV> 
    </BODY> 
</HTML>

建立如下：

For box generated by C.B. is established by 
html     initial C.B. (UA-dependent) 
body     html 
div1     body 
p1      div1 
p2      div1 
em1      p2 
strong1     p2

然而，这并不是非替换块级元素^的height真（其仍然在正常流动！）：

10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

[... ]如果'height'是'auto'，高度取决于元素是否具有任何块级别的子元素以及是否具有填充或边框。

[...]只考虑正常流量的儿童（即浮动框和绝对定位的框被忽略，并且相对定位的框被认为没有它们的偏移量）。

的height的初始值是auto，因此如果块级元素没有任何块级别的儿童，填充或接壤，height的计算值将是0。

That's true even for <html> element。

来源

2015-02-05 21:22:48

我认为，如果指定的不是别的是所有块元件具有一个100％的宽度。高度的工作方式不同，因为如果您不在任何位置设置高度，只需将其高度设置为内容的总高度即可。

来源

2015-02-05 20:56:46 Tomas

为什么百分比宽度工作，即使没有给出包含块的明确宽度值？

回答

相关问题