css - 了解一些 CSS

Question

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

http://jsfiddle.net/4t55g/

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

Answer 1

这是由于 block formatting context这是发生 block 盒布局和 float 交互的区域。

block 格式化上下文由以下之一创建:

• 根元素或包含它的东西
• float ( float 不是无的元素)
• 绝对定位元素(位置是绝对或固定的元素)
• 内联 block (带有显示的元素:内联 block )
• 表格单元格(带有 display: table-cell 的元素，这是 HTML 表格单元格的默认设置)
• 表格标题(带有 display: table-caption 的元素，这是 HTML 表格标题的默认设置)
• 溢出值不是可见值的元素
• flex boxes(显示元素:flex 或 inline-flex)

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

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

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