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

Question

根据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>  

Answer 1

正常流程中未替换的块级元素占用width其父级.

嗯,这对儿童来说是谎言!

为了理解幕后发生的事情,我们应该从如何width计算未替换的块级元素开始.

10.3.3正常流程中的块级非替换元素

其他属性的已使用值必须包含以下约束:

'margin-left'+'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right'= 包含块的宽度

[...]如果'width'设置为'auto',则任何其他'auto'值变为'0','width'跟随得到的相等.

由于width属性的初始值是auto,width块级元素的含义与其包含的块相同.

<html>是一个块级元素,它存在于初始包含块中.

初始包含块是一个矩形框,它取视口的宽度.因此,<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"溢出"计算为"可见"时正常流程中的块级非替换元素

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

[...]只考虑正常流量中的儿童(即,忽略浮动框和绝对定位的框,并且考虑相对定位的框而没有它们的偏移).

的初始值height是auto,因此,如果在块级元素没有任何块级别的儿童,填充或边界,的计算值height将是0.

即使对于<html>元素也是如此.