inline-box,line-height,line-box之间的关系并给出计算方法

line-box的效果因为不能在页面中直观的体现出来，所以一直以来不知其所以然，，尽管一些大神都有对其讲解，但是并没有给出详细的计算方法，本文就通过ps将计算过程直观的呈现出来，帮助理解。。

几个概念

1. line box：包裹 inline box 的一个盒子，一个或多个 line box 堆叠撑起一个 HTML 元素。
2. inline(-level) box：可以是一个由行内元素包裹的盒子，也可以是一个纯文字的匿名盒子。
3. content area(内容区)：对于非替换元素来说，content area 的范围由 font-size 以及字体本身决定；对于替换元素来说，由元素自有宽高决定。
4. baseline：一个元素基线的位置由该元素内字母 x 底部所在的位置决定，当然字体不同基线所在的位置也就不同。

替换元素：即display=inline-block的元素，如img,input,button,textarea,及display=inline-block的元素

line-height(行高)

　　line-height行高是指文本行基线之间的距离。行高line-height实际上只影响行内元素和其他行内内容，而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响。在应用到块级元素时，line-height定义了元素文本基线之间的最小距离，即最小行高

　　[注意]如果块级元素中的某一个子级内联元素设置的行高比最小行高大，则行框以设置行高来渲染；如果小，则以最小行高来渲染。因为，每一个子级内联元素的行高都是行内框的高度，只有一行中所有的行内元素(包括代表父级元素的匿名文本)，最大的行内框高度才能成为整行的行高。下面会有详细解释

　　值: <length> | <percentage> | <number> | normal | inherit

　　初始值: normal(通常line-height:normal的值为font-size值的1.2倍)

　　应用于: 所有元素

　　继承性: 有

　　百分数: 相对于元素的字体大小font-size

 

content area(内容区)

　　对于行内非替换元素或匿名文本某一部分，font-size确定了内容区的高度

 

Inline-box(行内框)

　　内容区加上行间距等于行内框。如果一个行内非替换元素的font-size为15px，line-height为21px，则相差6px。用户代理将这6像素一分为二，将其一半分别应用到内容区的顶部和底部，这就得到了行内框

 

　　当line-height小于font-size时，行内框实际上小于内容区

 

line-box(行框)

　　行框定义为行中最高行内框的顶端到最低行内框底端之间的距离，而且各行框的顶端挨着上一行行框的底端

 

框属性

　　内边距、外边距和边框不影响行框的高度，即不影响行高

　　行内元素的边框边界由font-size而不是line-height控制

　　外边距不会应用到行内非替换元素的顶端和底端

       margin-left、padding-left、border-left应用到元素的开始处；而margin-right、padding-right、border-right应用到元素的结尾处

Vertical-aglin:

（这里的”元素”二字，指的是该元素的inline-box,不是内容区）

Baseline:将元素的基线与父元素的基线对齐

Bottom:将元素的底部与父元素line-box的底部对齐

Text-bottom:将元素的底部与父元素内容区的底部对齐

Top:将元素的顶部与父元素line-box的顶部对齐

Text-top:将元素的顶部与父元素内容区的顶部对齐

Middle:将元素的水平中点对齐x的水平中点

(+-n)px:将元素的基线相对于父元素基线上下便宜npx

(+-)X%:根据line-height的值来计算偏移像素

Sub:将元素的基线与父元素下标对齐

Super：将元素的基线与父元素的上标对齐

Inherit:从父元素继承

 

line box 高度

浏览器会计算 line box 中每一个 inline box 的高度，对于不同的 inline box 计算方式有所不同：

• 如果是一个替换元素（比如 img，input），inline-* 元素或者是 flexbox 中的子元素，高度由其 盒子模型决定；
• 如果是一个非替换元素，高度由它的 line-height 决定，而不是 content area（重点），虽然有时候看起来像 content area 撑开了 line box 的高度。

所以当line-height-content area height<0时，内容区会有溢出的情况。

  1，line box 中所有 inline box 的最高点以及最低点决定了它的高度（该计算包括了 strut 的高度，后文会提到 strut）。

  2，非替换元素的的 margin，padding 以及 border 并不会影响 line box 高度的计算。当一个 inline-level box 的 line-height 小于 content area 的时候，line box 的高度就会小于 content area，此时元素的 background 以及 padding 等就会溢出到 line box 之外。

leading:

content area 的高度与 inline box 的高度差就是 leading，这个 leading 会等分被添加到 content area的顶部与底部，所以说 content area 永远位于 inline box 的中间（垂直居中）。

strut:

浏览器认为每一个 line box 的起始位置都存在一个宽度为 0，没有任何字符的 匿名 inline box，称为 strut，这个 strut 是会从父元素继承 line-height 的，因此它的高度会影响整个 line box 高度的计算。strut 其实就相当于一个不可见的字母 x，上文已经提到 strut 本身是具有 line-height 的，所以就导致图片底部多了一段间隙。

以下所有计算过程都是以匿名的inline box的“xgl”为基准。其中x即为strut

 

计算过程：

Leading 为正值时

Leading为负值时

Text-top时

 

Span的display=inline-block后的计算方式：

end!