html - 如果未指定 DIV 的宽度，它是否始终默认为 100%？

Question

如果我有下面的 HTML，我总是认为外部 Div 会缩小到内部 Div 的大小(基于 HTML 表格的工作方式)。

我在任何地方都没有看到过这个描述，但这里的 div.outer 似乎是其容器宽度的 100%，对吧？

<div id="outer">
<div  id="inner" style="width:300px">
some text here
</div>
</div>

Answer 1

div 是 block 级元素。正如 Temani Afif 在评论中所说，

A block-level element occupies the entire space of its parent element

但是在以下情况下这可能会发生变化:

h1 {
    color: black;
    font-weight: 700;
    font-size: 16px;
    clear: both;
}
.outer {
    border: 1px solid black;
    padding: 5px;
    background-color: red;
    color: white;
    margin-bottom: 100px;
}
.inner {
    border: 1px solid black;
    padding: 5px;
    background-color: yellow;
    color: black;
    width: 300px;
}

.outer-float-left {
    float: left;
}

.outer-float-right {
    float: right;
}

.outer-display-inline {
    display: inline;
}

.outer-display-inline-block {
    display: inline-block;
}

.outer-display-table {
    display: table;
}

.outer-position-relative {
    position: relative;
}

.outer-position-absolute {
    position: absolute;
}

.outer-position-fixed {
    position: fixed;
    bottom: -100px;
    left: 0;
}

.outer9 {
    position: fixed;
}

<h1>Default scenario. Outer div's float property set to none, display property set to block and position property set to static.</h1>
<div class="outer">
    This is Outer Div
    <div class="inner">
        This is Inner Div
    </div>
</div>

<h1>Outer div's float property set to left. Unless a width specified, float elements always take necessary width to wrap the elements inside and not more.</h1>
<div class="outer outer-float-left">
    This is Outer Div
    <div class="inner">
        This is Inner Div
    </div>
</div>

<h1>Outer div's float property set to right</h1>
<div class="outer outer-float-right">
    This is Outer Div
    <div class="inner">
        This is Inner Div
    </div>
</div>

<h1>Outer div's display property set to inline. Because inline elements can't contain block level elements, inner div's display property is changed to inline. Also notice that outer div's margin-bottom is missing. It's because you can't set width, max-width, height, max-height, margin-top and margin-bottom for inline elements.</h1>
<div class="outer outer-display-inline">
    This is Outer Div
    <div class="inner" style="display: inline;">
        This is Inner Div
    </div>
</div>

<h1>Outer div's display property set to inline-block</h1>
<div class="outer outer-display-inline-block">
    This is Outer Div
    <div class="inner">
        This is Inner Div
    </div>
</div>

<h1>Outer div's display property set to table</h1>
<div class="outer outer-display-table">
    This is Outer Div
    <div class="inner">
        This is Inner Div
    </div>
</div>

<h1>Outer div's position property set to relative</h1>
<div class="outer outer-position-relative">
    This is Outer Div
    <div class="inner">
        This is Inner Div
    </div>
</div>

<h1>Outer div's position property set to absolute</h1>
<div class="outer outer-position-absolute">
    This is Outer Div
    <div class="inner">
        This is Inner Div
    </div>
</div>

<h1 style="margin: 130px 0 75px;">Outer div's position property set to fixed.</h1>
<div class="outer outer-position-fixed">
    This is Outer Div (position - fixed)
    <div class="inner">
        This is Inner Div
    </div>
</div>

可能还有其他情况。这就是我现在能记住的全部。希望有所帮助。谢谢。 :)

如果您需要进一步说明，可以阅读这些文章:

All About Floats

For Display property

For position property