line-height的笔记

vertical-align的类型

1. 线类
   • baseline
   • top
   • middle
   • bottom
2. 文本类
   • text-top
   • text-bottom
3. 上标下标类
   • sub
   • super
4. 数值百分比类
   • 数值类
   • 百分比类

vertical-align起作用的前提

应用于inline水平以及table-cell元素

line-height的定义

行高，两行文字基线间的距离

什么是基线？？？

字母x下边缘的位置

什么是行内框盒子模型

内容区域(content area): 是一种围绕文字看不见的盒子，只和font-size相关
内联盒子(inline boxes)
行框盒子(line boxes)
包含盒子(containing box)

关于行高我们应该知道

行高由于其继承性，影响无处不在，即使单行元素也不例外
行高只是幕后黑手，高度表现不是行高，而是内容区域和行间距
内容区域高度 + 行间距 = 行高

总结：
行高决定内联盒子的高度，行间距是墙头草可大可小（甚至是负值）。保证上面的公式成立

line-height的属性类别

1. normal默认属性值和元素字体相关
2. number 使用数值为行高值 line-height: 1.5根据当前元素的font-size的大小
3. length 具体的长度值作为行高
4. 使用百分比 相对于设置了该line-height属性的元素的font-size
5. inherit
   input元素的行高的默认值是normal,和浏览器相关

应用元素有差别

• line-height: 1.5 所有可继承元素根据自身font-size重新计算行高
• line-height: 150%;当前元素计算行高，继承给下面元素