在css中,line-height有下面五种可能的值:我们来看看w3c中列出如下可能值:

normal:默认,设置合理的行间距。

number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距。

length: 设置固定的行间距。

%: 基于当前字体尺寸的百分比行间距。

inherit:规定应该从父元素继承line-height属性的值。

下面我们分别来看看上面五种具体介绍:

一:百分比(%):

比如如下HTML代码:

<h1>我是龙恩</h1>

<p>我是中国人</p>

<div>我爱自己的祖国</div>

然后我在css中定义如下:

*{margin:0;padding:0;}

body {font-size:30px;line-height:120%;}

h1 {font-size:24px;}

p {font-size:20px;}

div {font-size:18px;}

那么上面的body的line-height = 30px * 120% = 36px; 因此body的子元素都会继承body的line-height;除非本身定义line-height覆盖;因此:

h1 {line-height:36px;}

P {line-height:36px;}

Div {line-height:36px;}

二:长度(length):

Html代码还是如上的,css代码改成如下:

*{margin:0;padding:0;}

body {font-size:30px;line-height:20px;}

h1 {font-size:24px;}

p {font-size:20px;}

div {font-size:18px;}

在body元素设置line-height为20px,那么后代的子元素都会继承该20px,因此:

h1{line-height:20px;}

P{line-height:20px;}

Div{line-height:20px;}

但是我们可以更改自身的line-height;

三:normal 

line-height被设置为normal(约为1.2);如下代码:

*{margin:0;padding:0;}

body {font-size:20px;line-height:normal;}

h1 {font-size:30px;}

p {font-size:25px;}

div {font-size:20px;}

Css代码如上:计算如下:

body{line-height = 约20px * 1.2 = 24px}

h1{line-height = 约30px * 1.2 = 36px}

P {line-height = 约25px * 1.2 = 30px}

div{line-height = 约20px * 1.2 = 24px}

四:纯数字

line-height被设置为纯数字1.5,比如如下代码:

*{margin:0;padding:0;}

body {font-size:20px;line-height:1.5;}

h1 {font-size:30px;}

p {font-size:25px;}

div {font-size:20px;}

此数字会与当前的字体尺寸相乘来设置行间距; 那么各个元素的line-height变为如下:

Body{line-height = 20px * 1.5 = 30px;}

H1 {line-height = 30px * 1.5 = 45px;}

P {line-height = 25px * 1.5 = 37.5px;}

Div {line-height= 20px * 1.5 = 30px;}
那么什么是行高呢?行高是指文本行基线间的垂直距离。如下理解:

从上到下四条线分别是顶线,中线,基线和底线;任意两条相同颜色的垂直距离就是我们说的行高;

理解行高,行距与半行距

行距:指一行底线到下一行顶线的垂直距离,如下图所示:

半行距:是行距的一半,即区域3垂直距离/2 ,区域1,2,3,4的距离之和为行高,而区域1,2,4距离之和为字体大小,半行距 = (行高 -  字体size)/2

行高:如下图任意两条相同颜色的垂直距离就是行高。在应用到一个块级元素时,它定义了该元素的基线之间的最小距离而不是最大距离,line-height与font-size的计算值之差分为两半,分别加到一个文本行内容的顶部和底部。所以如果在设计稿上标注的margin-top: 20px的话,如果line-height:24px; font-size:16px的话,那么margin-top的计算方法等于 = 20 - (24 - 16)/2 = 16px;

如下图所示:

理解css中的line-height的更多相关文章

  1. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  2. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  3. css中的width,height,属性与盒模型的关系

    这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...

  4. CSS中width和height与盒子模型的关系

    盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...

  5. 深入理解CSS中的margin

    1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...

  6. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  7. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  8. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  9. 如何理解CSS中的浮动 :其实他就像乘坐扶梯一样

    只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况:       做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...

  10. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

随机推荐

  1. 慢牛股票-基于Sencha+Cordova的股票类APP

    13,14这两年,我的业余时间都花在了移动互联网技术和股票技术分析上,14年底,终于开发完成慢牛,上线小米应用商店.应用宝.百度应用商店.   慢牛是一款数据分析类的股票APP,提供数据订阅和数据分析 ...

  2. EF实体框架之CodeFirst四

    在EF实体框架之CodeFirst二中也提到数据库里面一般包括表.列.约束.主外键.级联操作.实体关系(E-R图).存储过程.视图.锁.事务.数据库结构更新等.前面几篇博客把表.存储过程.视图这些算是 ...

  3. cocos2d-x 3.6 mac下的试用(粒子,触摸事件,图片)

    戏说 虽然公司再如何如何,咱程序员在干好课外学习的情况下也是要努力做好本职工作的. 工作中的lua也写多了,深入了解Cocos2d-x当然还是要倒腾倒腾C++,对于一个C#用了这么多年,工作用lua的 ...

  4. android之文件权限问题

    当我们在手机上安装一个应用的时候,linux会为每个APP创建一个用户名和用户组 xidian.dy.com.chujia是系统为每个应用创建的一个独立的文件夹,我们可以看到这个文件的所有者为app_ ...

  5. 23.C#Queryable的扩展方法(十二章12.1-12.2)

    今天要写的知识还真心有点绕呢,对于第一节的内容,其实是把原先在内存中的数据源,换成了从数据库中提取出来的数据.从代码的使用方式上是一样的,直接跳过,来看看IEnumerable和IQueryable的 ...

  6. JSON Web Token - 在Web应用间安全地传递信息(zhuan)

    来自 http://blog.leapoahead.com/2015/09/06/understanding-jwt/ JSON Web Token(JWT)是一个非常轻巧的规范.这个规范允许我们使用 ...

  7. PHP函数可变参数列表的具体实现方法介绍

    PHP函数可变参数列表可以通过_get_args().func_num_args().func_get_arg()这三个函数来实现.我们下面就对此做了详细的介绍. AD:2014WOT全球软件技术峰会 ...

  8. Java原来如此-比较器(Comparable、Comparator)

    有时候需要对Collection或者不为单一数字的Array进行比较,有两种方法,1是实现Comparable接口,2是实现Comparator接口. 1.ComParable接口 Comparabl ...

  9. CSS3媒体查询

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

  10. PowerDesigner15下载、安装以及破解

    一.先安装PowerDesigner15(PowerDesigner15.1.0.2850),下载地址:点击下载 二.破解文件下载地址: 找到一个,居然这家伙的东西不是免费的:点击跳转 三.破解方法: ...