传智博客
快捷导航
蚂蚁部落
蚂蚁部落 网站首页 实例代码 CSS实例 查看内容

CSS line-height属性用法深入介绍

2017-11-2 11:24| 发布者: admin| 查看: 84| 评论: 0|来自: 蚂蚁部落

关于line-height属性可能大家都不陌生,从字面意思看它的作用是用来设置行高。

常见的应用是设置单行文本在元素中垂直居中,参阅css多行文本垂直居中效果一章节。

其实此属性会涉及到很多的相关知识,下面就对此属性的用法做一下深入介绍。

一.基本用法:

此属性用来用来设置行间的距离,并且具有继承性。

语法结构:

[CSS] 纯文本查看 复制代码
line-height : normal | <实数> | <长度> | <百分比> | inherit

参数解析:

1.normal:默认属性值,通常情况此默认值是通常为1到1.2之间。

2.实数:当是一个数字的时候,它设置的是缩放因子。

3.长度:就是直接以像素的方式设置。

4.百分比:以百分比的方式设置行高。

5.inherit:这比较好理解,就是继承父元素的行高,IE8和IE8以下浏览器不支持。

下面通过代码实例对各种类型的属性值做一下简单介绍:

1.当属性值为normal的时候:

在明确设置属性值为normal或者或者没有设置line-height属性同时没有继承其他特别line-height属性值的情况下,那么line-height属性值就为nomal。此值大小在1到1.2之间,在不同的浏览器中会有一些差别,这里就以值为1.2标准。

可以认为nomal值是一个特殊的缩放因子。

css代码如下:

[CSS] 纯文本查看 复制代码
body{
  font-size:16px;
  line-height:normal;
}
h1{font-size:32px;}
p{font-size:16px;}
#footer{font-size:12px}

那么相关元素的最终line-height属性值如下:

a:3:{s:3:\"pic\";s:43:\"portal/201711/02/112705g3rbrm09nzv9gmkc.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由上面的图示也可以看出,normal属性值相当于一个特殊的缩放因子。

2.当属性值为实数时候:

当属性值为一个纯数字的时候,这个时候就是规定了一个缩放因子。

缩放的参考对象就是当前元素字体的大小。

子元素所继承的也是这个缩放因子,而不是父元素通过缩放因子所计算出来的行高值。

css代码如下:

[CSS] 纯文本查看 复制代码
body{
  font-size:16px;
  line-height:1.5;
}
h1{font-size:32px;}
p{font-size:16px;}
#footer{font-size:12px}

那么相关元素的最终line-height属性值如下:

a:3:{s:3:\"pic\";s:43:\"portal/201711/02/112756cxvk2dhxwuthuz2x.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

3.当属性值为长度时候:

也就是给line-height一个确定的值,比如line-height:20px;

这个就比较明确了,子元素也会继承这个设定的值。

css代码如下:

[CSS] 纯文本查看 复制代码
body{
  font-size:16px;
  line-height:20px;
}
h1{font-size:32px;}
p{font-size:16px;}
#footer{font-size:12px}

那么相关元素的最终line-height属性值如下:

a:3:{s:3:\"pic\";s:43:\"portal/201711/02/112901k366gcyyji9j3fo0.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

4.当属性值为百分比时候:

当属性值为百分比的时候,那么会以当前元素的字体的大小获取line-height属性值。

比如当前元素的字体大小为16px,line-height属性值为120%,那么line-height属性值实际就为19.2px。

那么当前元素的子元素就会继承这个19.2px,而不是120%这个百分比。

css代码如下:

[CSS] 纯文本查看 复制代码
body{
  font-size:16px;
  line-height:120%;
}
h1{font-size:32px;}
p{font-size:16px;}
#footer{font-size:12px}

那么相关元素的最终line-height属性值如下:

a:3:{s:3:\"pic\";s:43:\"portal/201711/02/113004zeee7n6vvy7eg1p6.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

属性值为乘积因子和百分比区分参阅line-height属性值为百分比和数字乘积因子的区别一章节。

考虑到篇幅问题,更多内容可以参阅line-height属性的行内框和行框等内容介绍一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:21 , Processed in 0.067434 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部