盒模型/行内框盒子模型及line-height/vertal-align取值分析

盒模型

盒模型之因此称为“盒”是由于在一个页面布局中，文档中的每个元素（块级元素）均呈现为一个矩形的“盒子”，这个“盒子”包含：内容（content） + 内边距（padding） + 边框（border） + 外边距（padding），如图：

图引自"https://developer.mozilla.org..."

盒模型又分为标准盒子模型和IE盒子模型。标准盒模型下，设置box的width的值后，这个值仅包含content的宽高，而在IE盒模型下，这个值是content + padding + border 后的宽高。例：

.test1{
    width: 200px;
    height: 200px;
    padding: 50px;
    border: 10px dotted red;
}

• 标准盒模型下，test1占据的实际宽为： border-left-width + padding-left + width +
  padding-right + border-right-width = 320px; 实际高度同理。

• 而在IE盒模型下，test1占据的实际宽为 200px; 而content部分的实际宽度为： width -
  border-left-width - padding-left - padding-right - border-right-width = 80px; content部分实际高度同理。

IE6+ 的浏览器默认采用的均为标准盒模型，随着ie6-的淘汰，标准/IE盒模型问题已经再也不成为问题。

在实际开发过程当中，宽度为百分比时经常由于1px的border使得宽度不可控，此时能够使用box-sizing: border-box; 来对特定元素应用IE盒模型，从而使得border和padding值被包含在设置的宽高内。

行内框盒子模型（line-boxes）

对于上文的盒模型的解释中，加了一个限制是指块级元素，对于行内元素，在页面布局结构中，一样会呈现为一个矩形的盒子，可是这个盒子是没法定义宽度和高度，行内元素的这个盒子咱们能够成为行内框盒子，行内框盒子的宽度和高度分别是紧贴着行内元素四周的宽和高。例如：

图中文字白色区域就是行内框盒子，白色区域的宽和高就是行内框盒子的宽和高，这里设置的文字大小为60px; 7个字，所以行内框盒子的宽高即为 420 X 60 ;

在说到行内框盒子时，一般会提起几个属性，line-height和vertal-align。

Line-height

line-height的意义在于指定行内框盒子的高度，对于块级元素，line-height指定的是块级元素内部line-boxes的最小高度，对于非替代行内元素，line-height用于计算行内框盒子的高度，对于替代行内元素，line-height多数时间是没有影响的。
line-height的取值能够为 具体值/数字/百分比。

• 具体值：这个没有疑问，设置多少就是多少，不过通常不推荐。

• 数字：实际的line-height的值为 当前字体 * 数字 ，好比font-size: 60px; line-height: 1.5;
  等同于line-height: 90px;

• 百分比：计算方式和数字是同样的，好比font-size: 60px; line-height: 150%; 等同于line-height:
  90px;

line-height具备继承性，不过数字和百分比的继承方式是不同的，数字是继承的数字值，而后子元素再拿当前font-size 数字，而百分比是依父元素的font-size 百分比，计算后把结果的带单位的具体值继承下去。例：

数字：
   父元素：`.test1{font-size: 20px; line-height: 1.5;}`
   子元素：`.test2{font-size: 60px;}`

父元素实际line-height为 1.5 * 20 px 即30px;
子元素实际line-height之继承父元素计算前的值，1.5，所以子元素实际line-height为 1.5 * 60 px 即90px;

百分比：
    父元素：`.test1{font-size: 20px; line-height: 150%;}`
    子元素：`.test2{font-size: 60px;}`

父元素实际line-height为 150% * 20 px 即30px;
子元素实际line-height直接继承父元素计算后的结果，即30px;
浏览器默认的line-height值为normal，W3C解释为 设置合理的行间距；MDN解释为取决于用户代理和元素的font-family，通常一般默认为1.2左右。在上图的例子中，在chrome下采用的是楷体，line-height测算为1.14。在最上面的图中，咱们未设置line-height的值，可是能够看获得文字上边缘后是有一条缝隙的，这就是所谓的合理的行间距的结果。
然而，实际上，行内框盒子模型的高度和line-height没有关系，而且在上图中咱们也能够发现，行内框盒子在布局中占据的高度其实是有line-height决定的，当line-height为0时，这个行框盒子就再也不占用页面布局的位置了，除了层级关系的相互遮盖，这个行内框盒子就不会影响其余元素的布局了，事实是这样的吗。例：

事实上咱们发现，红色的test2，上边缘的其实位置并非父级(0,0)的位置，也就是说，咱们的行框盒子实际仍是占据了一部分位置，这个其实和vertal-align有关的。

Tips：
   替代行内元素指的是值根据元素的不一样属性来决定元素的具体显示内容，好比input type="text/button/file"等，其余的如：object/video/textarea/img等，某些状况下canvas和audio也多是替换元素。

Vertal-align

vertal-align是用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。vertal-align的取值有主要有：baseline/top/middle/bottom/sub/super/text-top/text-bottom/百分比/具体值。先来了解一下各个值对应的位置。

• baseline: 默认值，自身的baseline和父级盒子的baseline对齐，若是没有自身baseline（好比img），则外边距底部边缘和父级的baseline对齐；

• middle: 自身垂直中点对齐 父级baseline + x 高度的一半 的位置；

• 百分比: 在baseline的基础上，向上（百分比为正）或者向下（百分比为负）偏移 line-height * 百分比 的值；

• 具体值：在baseline的基础上，向上（值为正）或者向下（值为负）偏移 这个值的距离；

top和bottom是两个比较特殊的取值，使元素与行框盒子的边界对齐而不是参考基线。

• top: 对齐所处行内框盒子的顶部；

• bottom: 对齐所处行内框盒子的底部。