定义
line-height,行高,两行文字基线之间的距离。
什么是基线?
如上图所示的红线,就是基线。
根据语言、字体不同,基线也会有所差异,汉字的基线就是底线。
line-height可以让单行文本垂直居中?
只是看着像是居中了。
其实并没有居中!!!
line-height属性值
1. line-height : normal
默认
由浏览器决定,且与元素font-family有关
2. line-height : <number>
使用数值作为行高值。例如: line-height: 1.5;
根据当前元素font-size大小计算
3. line-height : <length>
使用具体长度值作为行高值。例如: line-height: 1.5em / 2rem / 20px;
4. line-height : <precent>
使用百分比值作为行高值。例如: line-height: 150%;
相对于设置了该属性的元素的font-size大小计算
应用差别:
简单总结一下:
- 使用数值,它会根据当前元素的font-size重新计算行高。
- 使用%和em,它的行高是根据父元素的font-size计算出来的。
经验之谈:
body全局数值行高设置
body { font: 14px/1.4286 'microsoft yahei' ;}
行内框盒子模型
一共分四种:
line-height与内联元素的高度机制
内联元素的高度是由line-height决定的
需要知道的是:
- 行高由于其继承性,影响无处不在,即使单行文本也不例外;
- 行高只是幕后黑手,其实决定高度的是内容区域高度和行间距。
只不过,正好。。。
内容区域高度 + 行间距 = 行高
内容区域高度
1. 内容区域高度只与font-size以及font-family有关;
2. 在font-family: 宋体环境下,内容区域高度等于font-size。
如果行框盒子里面有多个不同行高的内联盒子,内联元素高度由谁决定?
由行高最高的盒子决定? 不完全对
需要考虑vertical-align的值。
如果没有,则确实如此。
line-height与图片
行高不会影响图片实际占据的高度
<p><img src= './1.jpg'>这是Babymetal</p>
可以看到,在图片下方存在空隙。在实际开发中,我们是不需要这个空隙的,怎么消除呢?
消除空隙的方法:
- 图片块状化 - 无基线对齐
img { display: block ;}
- 图片底线对齐
img { vertical-align: bottom ;}
- 行高足够小 -基线位置上移
p { line-height: 0 ;}
line-height实际应用
图片水平垂直居中
(IE8+)
容器 { line-height: 300px ; text-align: center ;}
图片 { vertical-align: middele}
多行文本水平垂直居中
(IE8+)
容器 { line-height:固定值; text-align: center}
文字 { display: inline-block ; line-height: normal ; text-align: left ; vertical: middel ; }
实现原理:
和图片一样,区别在于需要将文本所在容器转换为display: inline-block,然后重置一下line-height、text-align。
张鑫旭