Question

我已经创建了一个我从教程中提取的一些CSS的准系统示例，我想知道是否可以进一步解释。

http://jsfiddle.net/4t55g/

设置是您名称的输入字段将自动展开以填充开始按钮旁边的空格。这里的关键似乎是包含它的范围上的overflow属性。为什么将其设置为hidden允许它收缩到正确的宽度？

Answer 1

这是由block formatting context引起的，这是块框布局发生的区域，浮动互相影响。

通过以下方式之一创建块格式化上下文：

根元素或包含它的东西
浮动（浮动不是没有的元素）
绝对定位的元素（位置绝对或固定的元素）
内联块（带显示的元素：内联块）
表格单元格（带有显示的元素：table-cell，这是HTML表格单元格的默认值）
表格标题（带有显示的元素：table-caption，这是HTML表格标题的默认值）
溢出值不是可见
弹性框（带显示的元素：flex或inline-flex）

在块格式化上下文中，框从一个包含块的顶部开始一个接一个地垂直排列。两个兄弟框之间的垂直距离由“边距”属性决定。块格式化上下文中相邻块级框之间的垂直边距折叠。

在块格式化上下文中，每个框的左外边缘触及包含块的左边缘（从右到左格式化，右边缘触摸）。即使存在浮动也是如此（尽管盒子的线框可能因浮动而缩小），除非盒子建立新的块格式化上下文（在这种情况下盒子本身可能因浮动而变窄）。 p>

另请参阅：http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Answer 2

这是CSS框模型如何工作的一个很好的例子。

HTML看起来像：

<div class="formLine">
    <button>start</button>  
    <span><input type="text" placeholder="enter a name"></span>
</div>

考虑以下CSS：

.formLine {
    width:50%;
    outline: 2px dotted red;
}
.formLine span {
    display: block;
    overflow :hidden;
    padding-right:5px;
}
.formLine input {
    border: 2px dotted blue;
    width: 100%;
}
.formLine button {
    width: auto;
    float:right;
}

小提琴：http://jsfiddle.net/audetwebdesign/ZkxBv/

为何有效

您的父容器包含display: block的范围，因此它将展开以填充其父元素的宽度。 <button>向右浮动，将导致<span>的内容在其周围流动。在这种情况下，只有一个元素<input>标记，一个内联元素。输入标记将尽可能多地扩展以填充其父容器<span>。

如果您已声明overflow: visible，则输入字段将占用父容器的整个宽度，并在按钮下方开始一行。

但是，通过声明overflow: hidden，浏览器会执行其他操作。浏览器尝试将跨度放在与浮动按钮相同的行上，并确定跨度的内容太长（因此溢出条件）。浏览器比剪辑跨度以容纳按钮，并尝试相应地包装内容。在这种情况下，输入按钮具有可变宽度，因此它会收缩以填充空间。非常聪明，它给出了有用的结果。

您可以通过使用简单文本替换输入按钮来查看效果：

<div class="formLine">
    <button>start</button> 
    <span><em>Some line with a few words that are not too long. As you can see, the text tries to flow around the button on the right.</em></span>
</div>

在这种情况下，单词流出按钮（但不在下面），然后换行以形成新行。如果您将overflow更改为可见，则文本将在按钮下方流动。

了解一些CSS

2 个答案: