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

从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道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. PAT甲级——A1081 Rational Sum

    Given N rational numbers in the form numerator/denominator, you are supposed to calculate their sum. ...

  2. 关于socket的setsockopt的使用

    关于setsockopt的使用 学习python的时候学习到了socket,其中有个setsockopt方法的使用,于是乎整理一下关于这个方法的一些内容. 本节目录 一 功能描述 二 用法(getso ...

  3. 如何学习AxureRP Axure学习方法

    从作者最初接触的5.5版本,到5.6版本,到后来6.0的多个迭代版本,直到现在的6.5版本,AxureRP每次的版本升级都伴随着新功能的增 加,也解决了原型设计上的一些难题.这也从另一个方面诠释了“学 ...

  4. kafka一些问题点的分析

    kakfka架构图: 理解kafka需要理解三个问题. 1.producer,broker,consumer,ZK的工作模式. broker,ZK是作为一个后台服务,而producer和consume ...

  5. Istio流量管理实践之(3): 基于Istio实现流量对比分析

    流量镜像 流量镜像,也称为影子流量,流量镜像提供一种尽可能低的风险为生产带来变化的强大功能.镜像会将实时流量的副本发送到镜像服务.镜像流量发生在主服务的关键请求路径之外. 在非生产或者测试环境中,尝试 ...

  6. webpack4.0打包的时候一些技巧

    4.0的webpack要比之前的版本强大的不是一点点 打包的时候也做了很多优化 然后说一些这段时间发现的有趣的技巧 1. 打包出来的文件很大,不知道是什么原因可以用 webpack-bundle-an ...

  7. python 日记 day3

    数据类型的概况:1.int 用于计算. 2.str 用于存储少量数据. 3.list 用于存储大量数据. 4.元祖 又叫只读列表,元素不可更改. 5. dic 用于存储关系型对象 . 6.集合 A.i ...

  8. 【One by one系列】一步步部署.net core应用

    我们的目标: CentOS系统 nginx服务器 asp.net core应用 mysql服务器 腾讯云服务器 工具准备 [Xshell]--使用windwos下的工具Xshell,原理就是使用SHH ...

  9. jqGrid首次加载时不加载任何数据

    1. 首次加载时候设置 jqGrid 属性 datatype: 'local' $("#grid").jqGrid({ url:"#", datatype:&q ...

  10. PowerDesigner在修改表的字段Name的时Code不自动跟着变的处理方法以及导入Mysql数据库的表

    tools-> GeneralOptions-> Dialog:Operation   Modes: 去掉 NameToCodeMirroring 前面的√ 导入数据库中的表到PowerD ...