vertical-align究竟是参照什么？

Question

对于vertical-align的描述

https://www.w3.org/TR/REC-CSS...

其中有关于 baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.

请问，这里的parent box 究竟是指称什么？

来个具体的实例。

.parent{width:200px;height:100px;border:1px solid red;}
.foo {
  vertical-align: baseline;
  height: 50px;
  width: 50px;
  display: inline-block;
  background-color: plum;
  position: relative;
}

<div class="parent">
    <span>the quick brown fox</span>
    <div class="foo">
    </div>
    <span>jump over the lazy dog.</span>
</div>

MSDN 上：baseline 元素基线与父元素的基线对齐。
它的父元素是个div,哪里有基线的说法？？

div.foo设置为vertical-align: baseline;
从html的结构上，它的parent box是  div.parent吗？
因该不是，div.parent是block box，根本没有baseline这种叫法。

Answer 1

看得不走心呢，往上看几行

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.

还有，block box 只是指这个 div 即是 block-level box 也是 block container box，跟其内部宣布的 context 无关。Block container box 可以宣布 BFC 也可以宣布 IFC。

Answer 2

对于Box，参见CSS Box Model:
https://www.w3.org/TR/css3-box/
例子中有解释parent box的地方

对于基线对齐，父元素的基线问题，这个讲的比较清楚：
http://christopheraue.net/201...

In case of no in-flow content the baseline is, again, the bottom edge of the margin-box (example on the right).