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

从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道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. 渗透测试入门DVWA 环境搭建

    DVWA是一款渗透测试的演练系统,在圈子里是很出名的.如果你需要入门,并且找不到合适的靶机,那我就推荐你用DVWA. 我们通常将演练系统称为靶机,下面请跟着我一起搭建DVWA测试环境.如果你有一定的基 ...

  2. Android笔记之让Debug和Release模式使用相同的签名

    方法如下图 完整的build.gradle如下 apply plugin: 'com.android.application' android { compileSdkVersion 29 build ...

  3. Spring Boot配置公共的线程池

    内存资源很宝贵,线程池资源不宜过多的创建,同一个应用,尽量使用统一的线程池,并且相关参数需要设置适当,不造成资源的浪费,也不影响性能的提升. import java.util.concurrent.T ...

  4. js 属性的遍历

    引自:http://es6.ruanyifeng.com/#docs/object 属性的遍历 ES6 一共有5种方法可以遍历对象的属性. (1)for...in for...in循环遍历对象自身的和 ...

  5. Activiti数据库

    数据库 Activiti的后台是有数据库的支持,所有的表都以ACT_开头. 第二部分是表示表的用途的两个字母标识. 用途也和服务的API对应. 1)     ACT_RE_*: 'RE'表示repos ...

  6. 关于dictionary和tuple充当函数参数

    需要接收dict时,使用 **name: 需要接收tuple时,使用 *name: --> *name参数后面的任何数据会被认为是’keyword-only’,即它们只能被当作关键词而非参数使用 ...

  7. Python-购物车系统

    # coding=utf-8 import os, pickle class color: def echo_error(self, red): print(f"\033[31;1m {re ...

  8. js身份证号码验证（小程序版）

    参考知乎专栏文章https://zhuanlan.zhihu.com/p/22949023 <view class='bgw'> <form> ...... <view ...

  9. location.hash的不一样用法

    除了可以当做锚点,定位到同name位置,location.hash还有两个用法. 平时开发都会用得到. 一:使js事件在浏览器中产生历史记录. 举个栗子: 我们在JS里面改变了页面的数据.样式等,比如 ...

  10. rdf（资源描述框架）

    资源描述框架(Resource Description Framework),一种用于描述Web资源的标记语言.RDF是一个处理元数据的XML(标准通用标记语言的子集)应用,所谓元数据,就是“描述数据 ...