为什么这个内联块元素被推下？

Question

以下是我的代码,我想了解为什么 #firstDiv被所有浏览器推倒.我真的想要理解这样一个事实的内在运作,即它被推向下而不是以某种方式向上拉.(我知道如何调整他们的上衣:))

而且我知道它的溢出:隐藏了导致它,但不确定为什么它推动该div向下.

body {
  width: 350px;
  margin: 0px auto;
}

#container {
  border: 15px solid orange;
}

#firstDiv {
  border: 10px solid brown;
  display: inline-block;
  width: 70px;
  overflow: hidden;
}

#secondDiv {
  border: 10px solid skyblue;
  float: left;
  width: 70px;
}

#thirdDiv {
  display: inline-block;
  border: 5px solid yellowgreen;
}

http://jsfiddle.net/WGCyu/.

Answer 1

基本上你在代码中添加了更多的混乱,这造成了更多的混乱,所以首先我试图消除阻碍理解真正问题的混乱.

首先,我们必须确定真正的问题是什么？ 这就是为什么" inline-block"元素被推下去的原因.

现在我们开始理解它并首先消除混乱.

1 - 为什么不给所有三个div相同的边框宽度？ 我们给它吧.

2 -浮动元素是否与向下推的内联块元素有任何关联？不,它与它无关.

所以,我们完全删除了那个div.并且您正在目睹内联块元素向下推动的相同行为.

接下来是一些文献的转向,以便掌握线框的概念以及它们如何在同一行中排列,特别是仔细阅读上一段,因为你的问题的答案就在于此.

"内联块"的基线是正常流程中其最后一个线框的基线,除非它没有流入线框或者其"溢出"属性具有"可见"以外的计算值,在哪种情况下,基线是底部边缘边缘.

如果您不确定基线,那么这里只是简单的解释.

除了'gjpqy'之外的所有字符都写在您可以想到基线的基线上,就好像您在这些"随机字符"下面绘制一条与下划线相同的简单水平线,然后它将成为基线,但现在如果你写任何'gjpqy'在同一行上的字符然后这些字符的下半部分将落在该行的下方.

因此,我们可以说除了'gjpqy'之外的所有字符都完全写在基线之上,而这些字符的某些部分写在基线之下.

3 -为什么不检查我们线路的基线在哪里？我添加了几个显示我们行基线的字符.

4 -为什么不在我们的div中添加一些字符来在div中找到它们的基线？这里,在div中添加了一些字符以阐明基线.

现在,当您了解基线时,请阅读以下关于内联块基线的简化版本.

i)如果有问题的内联块将其溢出属性设置为可见(默认情况下不需要设置).然后它的基线将是该线的包含块的基线.

ii)如果有问题的内联块的溢出属性设置为OTHER可见.然后它的下边距将位于包含框线的基线上.

• 第一点详细

现在再看看这个,以澄清你的概念,绿色div正在发生什么.如果还有任何混淆,那么这里添加更多靠近绿色div的字符以建立包含块的基线并且绿色div基线对齐.

那么,我现在声称他们有相同的基线？对？

5 -然后为什么不重叠它们,看看它们是否适合另一个？所以,我带来第三个div -left:35px; 现在检查他们是否有相同的基线？

现在,我们已经证明了我们的第一点.

• 第二点详细说明

好吧,在解释第一点第二点之后很容易消化,你会看到第一个div设置为除了可见(隐藏)之外的溢出属性,其底线位于该行的基线上.

现在,您可以进行几个实验来进一步说明它.

1. 设置第一个div溢出:可见(或完全删除它).
2. 设置第二个div溢出:除可见之外.
3. 设置两个div溢出:除了可见.

现在带回你的杂乱,看看是否一切都很好.

1. 带回来的浮动DIV(当然有必要
   增加身体的某些宽度)你看它有没有效果.
2. 带回相同的奇数边缘.
3. 将绿色div设置为溢出:在问题中设置时可见(未对齐是由于边框宽度从1px增加到5px所以如果调整为负值,则会看到没有问题)
4. 现在删除我添加的其他字符以帮助理解.(当然删除负面左侧)
5. 最后减少体宽,因为我们不再需要更宽的体宽.

现在我们又回到了我们开始的地方.

希望我已经回答了你的问题.

Answer 2

vertical-alignCSS中的默认值是baseline&此规则也适用于inline-block阅读此http://www.brunildo.org/test/inline-block.html

写vertical-align:top在你的inline-blockDIV中.

检查这个http://jsfiddle.net/WGCyu/1/

Answer 3

只是用 vertical-align:top;

演示

Answer 4

查看此替代示例.CSS3模块中描述了这种行为的原因:line:3.2.线盒包装[1]:

通常,线框的起始边缘接触其包含块的起始边缘,并且结束边缘接触其包含块的结束边缘.但是,浮动框可能位于包含块边缘和线框边缘之间.因此,尽管相同内联格式化上下文中的线框通常具有相同的内联进展(包含块的内容),但如果可用内联进展空间因浮动而减少,则它们可能会有所不同[...]

如您所见,第三个元素被向下推,尽管它没有overflow属性.原因必须在其他地方找到.你注意到的第二个行为在层叠样式表2级修订版1(CSS 2.1)规范中描述:9.5浮点数[2]:

由于浮动不在流中,因此在浮动框之前和之后创建的非定位块框垂直流动,就像浮动不存在一样.但是,根据需要缩短浮动旁边创建的当前和后续行框,以便为浮动的边距框腾出空间.

在这种情况下,你所有的display:inline-block;div都使用了一种特殊的类型10.8行高度计算:'line-height'和'vertical-align'属性(非常结束)[3]:baseline

"内联块"的基线是正常流程中其最后一个线框的基线,除非它没有流入线框或者其"溢出"属性具有"可见"以外的计算值,在哪种情况下,基线是底部边缘边缘.

因此,当您使用浮动元素和inline-block元素时,浮动元素将被推到一边,并且将根据1重新计算内联格式.另一方面,如果它们不合适,则缩短下一个元素.由于您已经在使用最少的空间,因此没有其他方法可以修改元素然后推送它们2.在这种情况下,最高元素将定义包装div的大小,从而定义baseline 3,而另一方面,2中所述的位置和宽度的修改不能应用于这种最小间隔的最大高度元素.在这种情况下,将导致我的第一个演示中的行为.

最后,你overflow:hidden会阻止#firstDiv被推到你的下缘的#container原因,虽然我在第11节找不到理由.没有overflow:hidden它作为例外和2和3定义.演示

TL; DR:非常仔细地了解W3建议和浏览器中的实现.在我看来,如果您不知道他们对周围元素所做的所有更改,浮动元素将被确定为显示意外行为.这是另一个演示浮点数常见问题的演示.

Answer 5

_{我最初是从回答这个问题开始的，但是在完成之前它被锁定为dupe，所以我将答案发布在这里。}

首先，我们需要了解什么inline-block。MDN中
的定义说：

该元素生成一个块元素框，该框将随周围的内容一起流动，就好像它是单个内联框一样（与被替换的元素非常相似）

要了解这里发生的情况，我们需要查看vertical-align，它是默认值baseline。

在此图中，您具有以下颜色图表：
蓝色：基线
红色：行高
的顶部和底部绿色：内联内容框的顶部和底部。

在#left元素中，您确实具有一些控制基线的文本内容。这意味着其中的文本定义了#left的基线。
在#right中，没有任何内容，因此浏览器除了使用框底部作为基准外没有其他选择。

在这个可视化中，我在一个示例中绘制了基线，其中第一个内联容器包含一些文本，下一个为空：

如果您专门将一个元素与顶部对齐，则实际上是说您将该元素的顶部与行框的顶部对齐。

通过示例可能更容易理解。

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
    vertical-align: baseline;
}
div#middle {
    vertical-align: top;
    height: 50px
}
   
div#right {
    font-size: 30px;
    height: 100px
}

<div id="left">
  <span>groovy</span>
</div>
<div id="middle">groovy</div>

<div id="right">groovy</div>

结果就是这样-我添加了蓝色基线和红色线框：
这里发生的是，线框的高度取决于整个行内容的布局方式。这意味着要计算顶部路线，必须首先计算基线路线。该#middle元件具有vertical-align:top，因此不用于基线的定位。但是#left和#right垂直放置，以便它们的基线对齐。完成此操作后，线框的高度增加了，因为#right较大的字体大小导致元素被向上推了一点。然后#middle可以计算元素的顶部位置，该位置沿着线框的顶部。