行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。

从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。尤其记得基线不是最下面的线，最下面的是底线。

行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。

行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。

半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2。

默认状态，浏览器使用1.0-1.2 line-height, 这是一个初始值。你可以定义line-height属性来覆盖初始值：p｛line-height:140%｝

你可以有5种方式来定义line-height。

1.line-height可以被定义为：body{line-height:normal;}

2.line-height可以被定义为：body{line-height:inherit;}

3.line-height可以使用一个百分比的值body{line-height:120%;}

4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;}

5.line-height也可以被定义为纯数字， body{line-height:1.2}

在实践中，碰到一个题型，可以拿来参考学习下：

 <style type="text/css">

         *{margin:0;padding:0;font-size: 12px;}

         .lh1{line-height: 2em;font-size: 20px;background: red;}

         .lh2{font-size: 20px;line-height: 2;background: green;}

         .lh3{font-size: 20px;line-height: 200%;background: blue;}

     </style>

 </head>

 <body>

     <div class="lh1"><p>行高1</p></div>

     <div class="lh2"><p>行高2</p></div>

     <div class="lh3"><p>行高3</p></div>

显示效果如下图：

可以知道：

<!--行高1、行高3都是带单位的em和%，他们继承是先计算好高度，再让子元素继承，所以20*2=40
行高2没带单位，它会先把行高继承下来，再根据子元素当前字体的大小来计算，所以12*2=24
1.font-size虽然lh1 和 lh2的font-size都设置了20px。但是他们下面的P标签所采用的font-size都是12px。通配符*指定的嘛，不指定的话肯定继承了（通配符的优先级高于继承）。
2.line-height
2.1 两个P标签都没有被指定line-height属性。所以他们会从父元素继承line-height
2.2 当line-height的值只有是数字的时候（也就是贴主所说不带单位）会被直接继承，其他的带单位值都是先计算，然后才被继承
归结一点：
如果行高继承不带单位，那么它会先继承行高，再根据当前子元素的字体大小来计算行高；反之，如果行高继承是带有单位，那么它将先计算行高，接着再让子元素继承。

line-height的用法（一）的更多相关文章

  1. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

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

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

  3. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  4. 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别

    二.也是平时经常用到的offsetheight 它返回的高度是内容高+padding+边框,但是注意哦,木有加margin哦,当然一般也木有啥需要把margin加进去的,以上代码为例,结果显示上图h2 ...

  5. 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览

    平时,不管在pc端页面还是移动端页面,因为我们一般很少会设置某个块的的高度,但是呢,我有时候有需要取到这些高度以便于我们方便进行判断和下一步的编写.一般这个时候我都是直接的获取一个块的高度.heigh ...

  6. ABAP 内表(internal table) 标题行(header line) 工作区(work area) 简介 - [SAP]

    刚开始学ABAP的时候,学到iternal table时,感觉一阵混乱.搞不清楚什么是work area,什么是header line,以及occurs是干什么用的.今天终于差不多搞明白了(我还是太弱 ...

  7. jquery text html width heigth的用法

    <body> <div id="div1"> <h3>我是标题</h3> </div> <div id=" ...

  8. python插件,pycharm基本用法，markdown文本编写，jupyter notebook的基本操作汇总

    5.14自我总结 一.python插件插件相关技巧汇总 安装在cmd上运行 #比如安装 安装:wxpy模块(支持 Python 3.4-3.+ 以及 2.7 版本):pip3 install wxpy ...

  9. 真正的能理解CSS中的line-height，height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  10. solrj6.2异常--Expected mime type application/octet-stream but got text/html.

    org.apache.solr.client.solrj.impl.HttpSolrClient$RemoteSolrException: Error from server at http://19 ...

随机推荐

  1. ArduinoUno和Leonardo的区别

    学习过Arduino的同学对ArduinoUno和Lenardo的不同点会有所了解,但说起具体的区别估计还是很多人答不上来,今天我们就详细解释下Arduino Uno和Leonardo的不同. 我们从 ...

  2. 06_springmvc之参数绑定(pojo和集合)

    一.包装类型pojo参数绑定 实现方法: 第一种方法:在形参中 添加HttpServletRequest request参数,通过request接收查询条件参数. 第二种方法:在形参中让包装类型的po ...

  3. java基础之Date类

    Date类: Date类概述 类 Date 表示特定的瞬间,精确到毫秒. 构造方法 public Date() public Date(long date) 成员方法 public long getT ...

  4. MySQL5.6 community从下载到安装

    一, 官网下载: https://www.mysql.com/downloads/      二, 安装过程 1, 双击打开 安装 这里是进行数据库配置: 端口默认为3306 这里我们更改为1207 ...

  5. RabbitMQ安装到使用入门

    一.安装erlang1.sudo vim /etc/yum.repos.d/rabbitmq-erlang.repo,将如下内容复制粘贴进去后保存:[rabbitmq-erlang]name=rabb ...

  6. HBase 数据坐标

  7. SyntaxError: Non-ASCII character ‘xe5’ in file 04.py on line 4, but no encoding declared

    出现问题的原因:程序中的编码错误,python默认是acii模式,没有支持utf8,代码中需要输出汉字,所以报错. 解决办法:源代码文件第一行添加:#coding:utf-8 -- coding: U ...

  8. mac上安装软件后，桌面上软件的图标如何去掉？

    桌面上的图标是软件的镜像包,默认安装以镜像形式,你选中它,按command+e 就可以推掉它

  9. 利用zepto.js实现移动页面图片全屏滑动

    HTML <%-- Created by IntelliJ IDEA. User: fanso2o Date: 2017/2/28 Time: 16:09 To change this temp ...

  10. 【codeforces 499C】Crazy Town

    [题目链接]:http://codeforces.com/problemset/problem/499/C [题意] 一个平面,被n条直线分成若干个块; 你在其中的某一块,然后你想要要到的终点在另外一 ...