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

从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道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. IT技术博客

    博客收藏大全: 陈皓博客: 陈硕的博客: 风云的博客: 当然我在扯淡: hellogirl: 田守枝Java技术博客: 廖雪峰博客: Milo游戏开发:

  2. JSON高亮格式化页面显示

    高亮CSS定义: <style type="text/css"> pre {outline: 1px solid #ccc; padding: 5px; margin: ...

  3. 10-2-点击生成10个div

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ES6之主要知识点(四）数值

    引自:http://es6.ruanyifeng.com/#docs/number 1.Number.isFinite(),Number.isNaN() Number.isFinite(); // t ...

  5. 关于LZO无法平台上压缩,但是数据需要使用平台压缩的问题解决

    我们做hive查询时候经常会出现出数过慢的问题,于是采用了LZO压缩,再在压缩块上做索引的方式去解决这个问题,但是也引入了新的问题点 lzo本身的压缩功能只能在linux上压缩再上传到HDFS平台,供 ...

  6. 3.Spring框架中的标签与配置文件分离

    1.Spring框架中标签的配置 1. id属性和name属性的区别 * id -- Bean起个名字,在约束中采用ID的约束,唯一 * 取值要求:必须以字母开始,可以使用字母.数字.连字符.下划线. ...

  7. JavaSE_08_Collections常用功能

    1.1 常用功能 java.utils.Collections是集合工具类,用来对集合进行操作.部分方法如下: public static <T> boolean addAll(Colle ...

  8. 深入浅出 Java Concurrency (15): 锁机制 part 10 锁的一些其它问题[转]

    主要谈谈锁的性能以及其它一些理论知识,内容主要的出处是<Java Concurrency in Practice>,结合自己的理解和实际应用对锁机制进行一个小小的总结. 首先需要强调的一点 ...

  9. 常用 docker 容器 使用

    mongo: 单点 docker run -idt --name=mongo --restart=always -p : -v /home/hylas/opt/mongo/data:/data/db ...

  10. Java的一些小知识

    Switch和If的区别: Switch case成功后将不再向下继续执行,而If却要每个条件判断一遍.过于浪费: Java中的多态: 方法重载: 通常是指在同一个类中,相同的方法名对应着不同的方法实 ...