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。

嗯，那是lie-to-children！

为了理解幕后发生的事情，我们应该从计算width of a non-replaced block-level element的方式开始。

<强> 10.3.3 Block-level, non-replaced elements in normal flow

以下约束必须包含在另一个的使用值中   属性：

'margin-left'+'border-left-width'+'padding-left'+'width'+   'padding-right'+'border-right-width'+'margin-right'=宽度   containing block

[...]如果'width'设置为'auto'，则任何其他'auto'值变为'0'   并且'width'来自产生的相等。

由于width属性的初始值为auto，因此块级元素的width与其包含的块相同。

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

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

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

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

W3C表示更好：

没有定位，下面包含块（C.B.）文件：

<!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是{{1}}。

That's true even for <html> element

Answer 2

我认为如果没有指定其他任何块元素，则所有块元素都具有100％的宽度。高度的工作方式不同，因为如果你没有在任何地方设置高度，它只是将它的高度基于内容的总高度。

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

2 个答案: