本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/37

定义

两行文字基线之间的距离。

基线的大体位置

基线的位置可以看成x字母下边缘的位置。

不同字体的基线位置会有微小的差别。

文本中的几条线:

行高示意图:

一行文本的行高为:上间距 + 文本的高度+下间距,并且上间距是等于下间距的。

我们还可以基本上这样认为:行高是两行文字基线之间的距离,也是两行文字顶线之间的距离,两行文字中线之间的距离。

行内框盒子模型

  • 内容区域 content area
  • 内联盒子 inline boxes
  • 行框盒子 line boxes
  • 包含盒子 containing box

内容区域 content area

围绕盒子看不见的区域,大小与font-size相关,高度就是上面图示中的文本高度。我们可以理解成选中文字之后的变色区域。

内容区域只与字号与字体有关,与行高无关!

在宋体字体下,内容区域高度 = 字体大小。在其他字体下,内容区域高度 ≈ 字体大小

内联盒子 inline boxes

内联盒子不会让内容成块显示,而是显示成一行,如果外部包含inline标签的话(span,a,em等),则属于内联盒子。如果只有文字的话,就是"匿名内联盒子"。

行框盒子 line boxes

每一行就是一个行框盒子,每个行框盒子都是由一个个内联盒子组成的。

包含盒子 containing box

由一行一行的行框盒子组成的。

总之:包含盒子包括行框盒子包括内联盒子

line-height的属性值

  • 对于块级元素,line-height指定了元素内部line-boxes的最小高度
  • 对于非替代行内元素,line-height用于计算line-box的高度
  • 对于替代行内元素,例如input、button,line-height没有影响

normal

取决于用户代理。桌面浏览器(包括火狐浏览器)使用默认值,约为1.2,这取决于元素的 font-family。

line-height: normal;

number

所用的值是无单位数值乘以元素的 font size。计算出来的值与使用数值指定的一样。大多数情况下,使用这种方法设置line-height是首选方法,在继承情况下不会有异常的值。

line-height: 3.5;

length

指定 用于计算 line box 的高度。

line-height: 3em;

percentage

与元素自身的字体大小有关。计算出的值是给定的百分比值乘以元素计算出的字体大小。

line-height: 34%;

inherit

IE8+

input框等元素默认行高是normal,可以使用

line-height: inherit ;

让元素可控性更强。

line-height:1.5、line-height:150%、line-height:1.5em的区别

em的效果跟%是一样的。

line-height:1.5

所有可继承元素根据font-size重新计算行高。

<div id="father">
<div id="son">
我的font-size为60px
</div>
</div>
#father{
font-size:12px;
line-height:1.5;
width:300px;
}
#son{
font-size:60px;
color:white;
}

此时,#son元素的line-height为60*1.5=75px;

line-height:150%/line-height:1.5em

当前元素根据font-size计算行高,将计算出来的值继承给下面的元素。

<div id="father">
<div id="son">
我的font-size为60px
</div>
</div>
#father{
font-size:12px;
line-height:150%;
width:300px;
}
#son{
font-size:60px;
color:white;
}

此时#son元素的line-height为12px*150%=18px。因为#son元素的文本框高度是60px,所以#son元素的半行间距约等于(18-60)/2 = -21px;所以#son元素内的两行字重合在一起了。

推荐使用无单位数值给line-height赋值

line-height与图片的表现

<div>
<img src="muke/resource/photo/1_0.jpeg">
</div>
div{
background-color: #abcdef;
}
img{
width: 300px;
height: 300px;
}

注意到图片下方有很窄的一条空隙,使得图片的高度不能填充父容器的高度。

现在在图片之后加入一些文字的话:

<div>
<img src="muke/resource/photo/1_0.jpeg">
<span>xxxx我是图片之后的文字</span><br>
</div>
div{
background-color: #abcdef;
}
img{
width: 300px;
height: 300px;
}
span{
background-color: white;
}

注意到图片底部是与字母x的下边缘(基线)对齐的,所以我们可以联想到,图片为了与之后文字的基线对齐(图片之后没有文字可以想象成有文字),所以图片下面才有了一小段空隙。为什么图片要与文字的基线对齐呢?因为vertical-align的属性默认是baseline。以后有时间再细细研究一下vertical-align这个属性。

如何消除图片下面的空隙

  • 图片底线对齐
img{
width: 300px;
height: 300px;
vertical-align:bottom;
}

这样的话图片就与文字的底线对齐,也就消除了空隙。

  • 图片块状化
img{
width: 300px;
height: 300px;
display:block;
}

因为vertical-align这个属性只对行内元素有效,所以将图片变为块状元素可以使得vertical-align:baseline失效。

  • 行高足够小,使得基线上移
div{
background-color: #abcdef;
line-height:0;
}

这里有个疑问,此时基线按理说应该比图片底端还要向上,为什么图片没有与基线对齐?

单行文本垂直居中原理

<div>
单行文本垂直居中
</div>
div{
background-color: #abcdef;
height: 300px;
line-height: 300px;
}

文字居中,即文字内容区域的一半 + 内容区域顶部到父容器上边缘 = 父容器高度的一半。而内容区域顶部到父容器上边缘 = 上间距 = 下间距,所以文字内容区域 + 上间距 + 下间距 = 父容器高度。因为文字内容区域 + 上间距 + 下间距 = line-height,所以当line-height = height时,单行文本居中。也就是文本的中线与父容器的中间线近似重合。

多行文本居中

<div id="father">
<div id="son">多行文本垂直居中<br>多行文本垂直居中<br>多行文本垂直居中<br></div>
</div>
#father{
line-height:300px;
background-color: #abcdef;
height: 300px;
}
#son{
line-height: normal;
display: inline-block;
vertical-align: middle;
border: 1px red solid;
}

多行文本居中,我们可以将这多行文本看成一个整体,即一行,问题转换为上面的单行文本居中,所以我们让父元素的height = line-height。为了覆盖掉继承过来的line-height,我们在#son元素中使用line-height:normal。看下效果:

貌似偏上了一些,为了让整体文本的中线与父容器的中间线近似重合。我们可以添加vertical-align: middle。让整体放置于父元素的中部,效果就是本节开始的那张图片的效果。

参考资料:http://www.imooc.com/learn/403

http://www.imooc.com/article/7767

https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height

CSS line-height概念与举例的更多相关文章

  1. [css] line boxes

    原文链接:http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85 ...

  2. css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  3. css & auto height & overflow: hidden;

    css & auto height & overflow: hidden; {overflow: hidden; height: 100%;} is the panacea! {溢出: ...

  4. CSS设置height为100%无效的情况

    CSS设置height为100%无效的情况 笔者是小白,不是特别懂前端.今天写一个静态的HTML页面,然后想要一个div占据页面的100%,但是尝试了很多办法都没有实现,不知道什么原因. 后来取百度搜 ...

  5. 构建前端第4篇之---使用css用法 height

    张艳涛 写于2021-1-20 height: 100%; What:  html的元素标签,例如 <html>,<body>,<div>都有height的css属 ...

  6. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  7. CSS——对height和line-height的理解

    最近在做CSS界面时经常遇到line-height和height这两个属性,一直没搞很明白,今天静下心来好好网上查阅了一下,算是有所领悟.https://blog.csdn.net/a20131263 ...

  8. HTML-HTML5+CSS3权威指南阅读(五、设备像素和CSS像素的概念)

    在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似 ...

  9. Ajax 概念 分析 举例

    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...

随机推荐

  1. CSS实现盒子高度撑开且以最高的为高

    前端开发中,常常会有需求两个盒子并排排列,高度以最高的为准,且高度是内容撑开的,类似于这样 如果不是用 table 布局,而是用 div 布局,两个子盒子浮动来实现的话,实际上默认写出来是这样的 此时 ...

  2. Zabbix 3.0 基础介绍 [一]

    zabbix 简介 Zabbix 是一个高度集成的网络监控解决方案,可以提供企业级的开源分布式监控解决方案,由一个国外的团队持续维护更新,软件可以自由下载使用,运作团队靠提供收费的技术支持赢利 zab ...

  3. Mysql--单表数据记录查询

    1.简单数据记录查询 1.1 简单数据查询 1.1.1 查询所有字段数据 例子:      1.1.2 "*"符号的使用 语法: 例子: 1.1.3 查询指定字段数据 例子:   ...

  4. ASP.NET MVC5+EF6+EasyUI 后台管理系统(88)-Excel导入和导出-主从表结构导出

    前言 前面一篇详细讲解了导入导出,本节演示混合结构的导出功能!同时提供代码下载.. 代码下载 vs2015+无数据库 先看效果图:这个一个混合的Excel,列表与自定义信息的混合! 我们的步骤大概分为 ...

  5. mysql故障解决笔记

    错误提示如图 一开始我查询了 [root@web01 mysql]# ls -al /lib/libc* -rwxr-xr-x 1 root root 1909464 Mar 22 01:49 /li ...

  6. 初识java这个小姑娘(二)

    妙解垃圾回收机制 周一,早高峰. 一段考验一个人耐力.智力.开车技术以及脾气的路. 我把车开进了一个没有红绿灯的丁字路口,然后就没有然后了. 来自三个方向的大车小车开始在不大的一块空间里开始互相斗智斗 ...

  7. Java 代码质量

    被滥用的instanceof instanceof滥用, 或者直接强转, 大都数情况可以用方法override, 而且应当避免使用isA(), isB()之类的写法; 比如sonA和sonB都继承自p ...

  8. poj 2271HTML

    poj2271 HTML Description If you ever tried to read a html document on a Macintosh, you know how hard ...

  9. 分享一波eclipse常用快捷键

    Eclipse快捷键 一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升. 1. ctrl+shift ...

  10. Cocos2d-x 3.2Lua演示样例UserDefaultTest(用户默认配置)

    Cocos2d-x 3.2演示样例UserDefaultTest(用户默认配置) 本篇博客介绍Cocos2d-x 3.2演示样例中的UserDefaulstTest,我们在开发中可能须要用到一些默认配 ...