inline-block
inline-block 必须要配合 vertical-align属性来用,不然就会出现莫名其妙的问题。
就是这个行模型啊,它的基线是根据最高的那个 inline-box 来确定的。
winter 老师建议,inline 的盒子的 vertical-align 只用 top || bottom || middle
比如下面的代码,倘若我们把最后一段 [class = 'verti'] 的 code 中的 vertical-align 调整为 baseline,一看,整个网页的布局就会被全部打乱,产生非常难以调试的代码。
<div style="font-size:50px;line-height:100px;background-color: pink;">
<div style="vertical-align: text-bottom;overflow: visible;display: inline-block;width: 1px;height: 1px;">
<div style="width:1000px;height:1px;background: red;">
</div>
</div>
Hello 中国
<div
style="vertical-align: baseline;line-height:70px;width:100px;height:150px;background-color: silver;display: inline-block;">
111</div>
<div
style="vertical-align: bottom;line-height:70px;width:100px;height:150px;background-color: aqua;display: inline-block;">
111</div>
<div
style="vertical-align: top;line-height:70px;width: 100px;;height: 50px;background-color: purple;display: inline-block;">
222</div>
<div class="verti"
style="vertical-align: middle;line-height:70px;width: 100px;height: 600px;background-color: blue;display: inline-block;">
222</div>
</div>
还有个坑的地方是,当你的vertical-align的 value 被设置为 text-top || text-bottom 的时候,如果里面的 inline-box 的 line-height 太高,把高度撑开了。text-bottom 会往上撑开父元素的高度,text-top 会往下撑开子元素的高度。这个时候,** 父元素的高度 = 往上撑开的 box 的高度 + 往下撑开的 box 的高度 - 中间的 text 的高度 。**
加一个重学前端里面讲 vertical-align 属性非常棒的图。