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

从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道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. idea配置tomcat中war和war exploded的区别

    是选择war还是war exploded 这里首先看一下他们两个的区别: war模式:将WEB工程以包的形式上传到服务器 :war exploded模式:将WEB工程以当前文件夹的位置关系上传到服务器 ...

  2. day 39 MySQL之多表查询

    MySQL之多表查询   阅读目录 一 介绍 二 多表连接查询 三 符合条件连接查询 四 子查询 五 综合练习 一 介绍 本节主题 多表连接查询 复合条件连接查询 子查询 首先说一下,我们写项目一般都 ...

  3. leetcode 854. K-Similar Strings

    给定两个字符串, 判断最少经过多少次swap 可以使得 两个字符串一致, 首先类似的问题 是存在一个 underlying graph 的. 每一个字母都对应着一个节点,两个字符串的不一致表示为图上的 ...

  4. Grep- Linux必学的60个命令

    1.作用 grep命令可以指定文件中搜索特定的内容,并将含有这些内容的行标准输出.grep全称是Global Regular Expression Print,表示全局正则表达式版本,它的使用权限是所 ...

  5. MapReduce 图解流程

    Anatomy of a MapReduce Job In MapReduce, a YARN application is called a Job. The implementation of t ...

  6. dubbo入门学习(三)-----dubbo整合springboot

    springboot节省了大量的精力去配置各种bean,因此通过一个简单的demo来整合springboot与dubbo 一.创建boot-user-service-provider 本篇博文基于上篇 ...

  7. Filter - 过滤敏感词汇(动态代理)

    /** * 敏感词汇过滤器 */ @WebFilter("/*") public class SensitiveWordsFilter implements Filter { pu ...

  8. MVC模式 - Model-View-Controller -（模型-视图-控制器）

    MVC(Model View Controller) MVC是一种设计典范.它是用一种业务逻辑.数据与界面显示分离的方法来组织代码,将众多的业务逻辑聚集到一个部件上,在需要改进和个性化定制界面及用户交 ...

  9. linux 修改命令提示符&ubuntu目录颜色个性化

    1.linux 命令提示符个性化 在 ANSI 兼容终端(例如 xterm.rxvt.konsole 等)里, 可以用彩色显示文本而不仅仅是黑白. 本文示范了如何使用粗体和彩色的文字.     相信每 ...

  10. vim 简明教程（转自飘过的小牛）

    vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn Vim Progress ...