0

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

http://jsfiddle.net/4t55g/

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

4

2 回答 2

1

这是 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，浏览器会执行其他操作。浏览器尝试将 span 与浮动按钮放在同一行，并确定 span 的内容太长（因此出现溢出情况）。浏览器会裁剪 span 以适应按钮，并尝试相应地包装内容。在这种情况下，输入按钮具有可变宽度，因此它会缩小以填充空间。非常聪明，它给出了有用的结果。

用简单的文本替换输入按钮可以看到效果：

<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为可见，则文本将在按钮下方流动。

于 2013-04-11T18:24:10.720 回答
1

这是由于块格式化上下文是块框布局发生的区域以及浮动相互交互的区域。

块格式化上下文由以下之一创建：

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

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

在块格式化上下文中，每个框的左外边缘接触包含块的左边缘（对于从右到左的格式化，右边缘接触）。即使存在浮动也是如此（尽管框的行框可能会由于浮动而缩小），除非框建立了新的块格式化上下文（在这种情况下，框本身可能会由于浮动而变窄）。

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

于 2013-04-11T18:16:20.127 回答