line-height的笔记
vertical-align的类型
- 线类
- baseline
- top
- middle
- bottom
- 文本类
- text-top
- text-bottom
- 上标下标类
- sub
- super
- 数值百分比类
- 数值类
- 百分比类
vertical-align起作用的前提
应用于inline水平以及table-cell元素
line-height的定义
行高,两行文字基线间的距离
什么是基线???
字母x下边缘的位置
什么是行内框盒子模型
内容区域(content area): 是一种围绕文字看不见的盒子,只和font-size相关
内联盒子(inline boxes)
行框盒子(line boxes)
包含盒子(containing box)
关于行高我们应该知道
行高由于其继承性,影响无处不在,即使单行元素也不例外
行高只是幕后黑手,高度表现不是行高,而是内容区域和行间距
内容区域高度 + 行间距 = 行高
总结:
行高决定内联盒子的高度,行间距是墙头草可大可小(甚至是负值)。保证上面的公式成立
line-height的属性类别
- normal默认属性值和元素字体相关
- number 使用数值为行高值 line-height: 1.5根据当前元素的font-size的大小
- length 具体的长度值作为行高
- 使用百分比 相对于设置了该line-height属性的元素的font-size
- inherit
input元素的行高的默认值是normal,和浏览器相关
应用元素有差别
- line-height: 1.5 所有可继承元素根据自身font-size重新计算行高
- line-height: 150%;当前元素计算行高,继承给下面元素