基线、底线、顶线

1.png

• 行高指的是文本行的基线间的距离
• 基线并不是汉字的下端沿，而是英文字母"x"的下端沿

行距、行高

2.gif

内容区

3.gif

• 底线和顶线包裹的区域，实际中不一定看得到，但却是存在

行内框

4.gif

• 行内框只是一个概念，它无法显示出来，但是它又确实存在
• 它的高度就是行高
• 在没有其他因素（line-height）影响的时候，行内框等于内容区域

行框

5.gif

• 行框（line box）。同行内框类似，行框是指本行的一个虚拟的矩形框
• 行框高度等于本行内所有元素中行高最大的值

元素对行高的影响

• 对于行内元素如em、strong、span和等，其padding、margin、border-top、border-bottom 不会增加行高。padding会覆盖；margin将重置为0；border-top和border-bottom同样会覆盖。padding-left、padding-right、border-left和border-right可用
• img元素会影响行高
• 设置行内元素的padding、border和margin并不会撑大外层元素的高度，如下图

6.png

对于inline-block 和 inline 的嵌套问题

需要了解的基本概念

• line-height 是继承的
• vertical-align 是不继承的

术语

• 行框
• 行内框
• 行框网格
• 行内框网格
• 自基准
  • 自基准是用于对齐基准网格,如vertical-align: top那么就会将自基准上的top line对齐到基准网格的top line
• 基准网格
  • 基准网格是作为本行框的对齐基准，其他的自基准必须根据vertical-align对齐到基准网格上

结论：

介绍几个概念叫做行内对齐规则和自基准选取规则

纯粹inline嵌套

对于行框内部存在一套隐式的对齐网格，我将这套对齐网格称之为行框网格（对于行内框，也有同样的隐式的对齐网格，称之为行内框网格）

• inline是不能设置width和height的
• 对于例如：<span>hi,<span>hello jack</span style="font-size:2em;">the<span>apple <span>is too nice</span></span></span>对于这样的纯粹inline嵌套，对于<span>hello jack</span style="font-size:2em;">这一部分会计算出行框，然后用计算出的行框设置行框网格，这个计算出的行框网格将成为自基准

混合嵌套（inline-block，inline）

混合嵌套依然遵循行内对齐规则,只是对于inline-block，自基准选取的时候和inline的选取规则不一样。

• inline的自基准选取规则：
  • 以自身形成的行框的行框网格作为外行框的自基准（行内框网格）
• inline-block的自基准选取规则:
  • 以自身形成的块的最底层的行框网格作为外层的行框的自基准（行内框网格）

例子

  <style>
    .align-left {
        height: 50px;
        width: 50px;
        display: inline-block;
        word-wrap:break-word;
    }

    .align-left:nth-child(odd) {
        background-color: darkorange;
    }

    .align-left:nth-child(even) {
        background-color: aqua;
    }
</style>

<div class="container">
    <div class="align-left"></div>
    <div class="align-left"></div>
    <div class="align-left"></div>
    <div class="align-left">12sdfjsdf</div>
    <div class="align-left"></div>
    <span>sdfe</span>
</div>
<div>
    <div class="align-left"></div>
    <div class="align-left"></div>
    <div class="align-left"></div>
    <div class="align-left"></div>
    <div class="align-left"></div>
</div>

inlineBlock.png

<div style="border:1px solid black;">
    <span>hello world Well I wonder<span style="display:inline-block; border:1px solid red; width:100px;"> could it be When I was dreaming about you baby You were dreaming of me Call me crazy Call me blind To still be suffering is stupid after all </span>of this time Did I lose my love to someone better And does she <span>love you like I do I do,</span> you know I really really do Well hey So much I need to say</span>
    <span>hello node</span>
    <span>hello nice</span>
</div>

inlineBlock2.png

<div style="border:1px solid black; margin-top:50px;">
    <span style="vertical-align: top;">hello world Well I wonder<span style="border:1px solid red;"> could it be When I was dreaming about you baby You were dreaming of me Call me crazy Call me blind To still be suffering is stupid after all </span>of this time Did I lose my love to someone better And does she <span style="font-size: 2em;">love you like I do I do,</span> you know I really really do Well hey So much I need to say</span>
    <span>hello node</span>
    <span>hello nice</span>
</div>

inlineBlock3.png