一、line-height的定义和工作原理总结

line-height的属性值:

  • normal    默认  设置合理的行间距。
  • number  设置数字,此数字会与当前的字体尺寸相乘来设置行间距line-height:1.5;
  • length    设置固定的行间距。  例如:line-height:18px;
  • %          基于当前字体尺寸的百分比行间距。 例如:line-height:150%;
 

line-height 的定义:

首先认识下文字的四条线
从上到下四条线分别是顶线、中线、基线、底线.其中vertical-align中属性有top、middle、baseline、bottom与四条线相关。
 
行高:指一行文字的高度。具体来说是指两行文字间基线之间的距离。
 

line-height的工作原理:

内联格式模型(inline formatting model)
contain box 内容区主要是靠字体大小撑起来
 
inline box    行内框只是一个概念,它无法显示出来,但是它又确实存在。在没有其他因素影响的时候,行内框等于内容区域,而设定行高则可以增加或者减少行内框的高度,即:将行距的值(行高-字体尺寸)除以2,分别增加到内容区域的上下两边
 
line box     行框是指本行的一个虚拟的矩形框,有文章说其高度等于本行内所有元素中行高最大的值如上图,当我更认可这样的解释:它的上下边界分别是行内所有inline-box的最高点和最低点。
如下图:
这两个的区别在于,前者的行内框都是用span,后者用的是div。(都设置display:inline-block)
说明对于兄弟元素而言,行内元素是中垂线对齐,而块级元素更接近底线对齐。
 
参考文章: 

行高的特性:

垂直居中性  line-height的最终表现是通过inline box实现的,而无论inline box所占据的高度是多少(无论比文字大还是比文字小),其占据的空间都是与文字内容公用水平中垂线的。这一重要的特性可以用来实现文字或图片的垂直居中对齐。
 
 

行高的继承性:

行高设置为具体数值(px/em)、百分比(%)会使用对父元素的font-size计算过后具体的数值继承下去。
normal 可以根据子元素不同的font-size值进行计算,但浏览器在解释normal的缩放比例时有细微差异。
最好的方案:纯数字 如:1.5。使用的是基于子元素font-size计算出来的line-height。
 
 

注意事项:

浏览器默认会给文字设置line-height。不同浏览器不同设置。
一般会reset.css里重新设置line-height,所以在布局时遇到文字要记得设置的line-height是否符合或重设
 
 
2017-01-19

line-height系列——定义和工作原理总结的更多相关文章

  1. PHP变量定义及工作原理

    1.变量定义: 通常学到的是,变量代表存储空间以及其中数据的一个“标识符”. 变量名 指向 变量值 更深入的说是 变量指向内存的一块区域 2.变量工作原理,通过画图分析法——内存空间 <?php ...

  2. Zookeeper 1、Zookeeper 定义与工作原理

    1.什么是Zookeeper » Zookeeper 是 Google 的 Chubby一个开源的实现,是 Hadoop 的分布式协调服务 » 它包含一个简单的原语集,分布式应用程序可以基于它实现同步 ...

  3. Spark系列(十)TaskSchedule工作原理

    工作原理图 源码分析: 1.) 25              launchedTask = true 26            } 27          } catch { 28         ...

  4. Spark系列(八)Worker工作原理

    工作原理图   源代码分析 包名:org.apache.spark.deploy.worker 启动driver入口点:registerWithMaster方法中的case LaunchDriver ...

  5. Spark系列(九)DAGScheduler工作原理

    以wordcount为示例进行深入分析 1  33  ) { 46        logInfo("Submitting " + tasks.size + " missi ...

  6. “Ceph浅析”系列之五——Ceph的工作原理及流程

    本文将对Ceph的工作原理和若干关键工作流程进行扼要介绍.如前所述,由于Ceph的功能实现本质上依托于RADOS,因而,此处的介绍事实上也是针对RADOS进行.对于上层的部分,特别是RADOS GW和 ...

  7. 【原创】源码角度分析Android的消息机制系列(三)——ThreadLocal的工作原理

    ι 版权声明:本文为博主原创文章,未经博主允许不得转载. 先看Android源码(API24)中对ThreadLocal的定义: public class ThreadLocal<T> 即 ...

  8. 【原创】源码角度分析Android的消息机制系列(六)——Handler的工作原理

    ι 版权声明:本文为博主原创文章,未经博主允许不得转载. 先看Handler的定义: /** * A Handler allows you to send and process {@link Mes ...

  9. RabbitMQ系列(二)深入了解RabbitMQ工作原理及简单使用

    深入了解RabbitMQ工作原理及简单使用 RabbitMQ系列文章 RabbitMQ在Ubuntu上的环境搭建 深入了解RabbitMQ工作原理及简单使用 RabbitMQ交换器Exchange介绍 ...

随机推荐

  1. higncharts 编辑Highcharts.com链接

    credits: {             text: 'Example.com',             href: 'http://www.example.com'          }, 只 ...

  2. mac 剪切文件

    首先选中文件,按Command+C复制文件:然后按Command+Option+V:就可以把你的文件剪走了!在这里补充一下,我这里讲的是剪切文件夹,不是剪切文本和文字!Command+X只能剪切文字文 ...

  3. DHCP配置部分

    1.DHCP工作过程 dhcp discover \\客户端请求服务器器提供地址 dhcp offer \\服务器提供ip地址 dhcp request \\客户端租用ip地址 dhcp ack \\ ...

  4. SqlServer tsql语句大全

    下列语句部分是Mssql语句,不可以在access中使用. SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE, ...

  5. iOS关于UITabView和UIAlertController,UIAlertAction以及UINavigation,值修改的传递页面推送

    关于UITabView和UIAlertController,UIAlertAction以及UINavigation,值修改的传递 集合嵌套集合的操作 声明 两个必须的的代理 实现部分代码 - (voi ...

  6. 函数(swift)

    输入输出参数(In-Out Parameters) 如果你想要一个函数可以修改参数的值,并且想要在这些修改在函数调用结束后仍然存在,那么就应该把这个参数定义为输入输出参数(In-Out Paramet ...

  7. 通过条件注释<!--[if IE]><!-->判断浏览器

    有时我们会在网站头部看到: <!--[if IE 7]> <![endif]--> 或者 <!--[if lt IE 9]> <![endif]--> ...

  8. Nginx 中 nginx.conf 详解

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  9. Base64图片与UIImage的相互转化

    http://blog.csdn.net/fudesign2008/article/details/38903085 Base64图片 -> UIImage - (UIImage *) data ...

  10. FZU 2110 Star

    简单暴力题,读入%lld会WA,%I64d能过. #include<cstdio> #include<cstring> #include<cmath> #inclu ...