您的位置:首页> 前端教程> CSS教程
文章导航

CSS line-height 行高

2019-5-9 08:08| 作者: admin| 查看: 985| 评论: 1|来自: 蚂蚁部落

此属性是CSS中使用最为频繁的属性之一,从字面意思看它用于设置行高。

事实也是如此,最常见的操作是通过此属性设置文本居中显示。

关于设置为本居中可以参阅如下两篇文章:

(1).单行文本居中参阅CSS 文本居中一章节。

(2).多行文本居中参阅CSS多行文本垂直居中效果一章节。

大多数教程对于此属性的介绍过于简单,下面再通过代码实例对其进行一下详细介绍。

语法结构:

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

属性值解析:

(1).normal:默认值,通常值介于1至1.2之间,不同浏览器可能会有所不同。

(2).实数:一个数字,用来设置缩放因子。

(3).长度:设置具体的行高,比如16px。

(4).百分比:通过百分比方式设置行高。

(5).inherit:继承父元素的行高,IE8和IE8以下浏览器不支持。

代码实例如下:

(1).normal值:

明确设置属性值为normal或者没有设置line-height属性,同时没有继承其他特别line-height属性值的情况下。

line-height属性值就为nomal,此值大小在1到1.2之间,不同的浏览器中会有一些差别,以值为1.2为例子。

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

[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/201905/09/081140w7h7odk1z31k10u3.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

(2).实数值:

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

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

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

[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/201905/09/081147b4h4dhfttyatpvnb.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(3).长度值:

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

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

[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/201905/09/081243hi7i7ws1li5oqboo.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] 纯文本查看 复制代码
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/201905/09/081329i92f2zq13flmlq99.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相关阅读:

(1).百分比属性值与数字属性值的区别参阅line-height属性值百分比和数字的区别一章节。

(2).与line-height相关的一些概念参阅line-height属性的行内框和行框一章节。

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

发表评论

最新评论

引用 前端小咸鱼 2019-8-18 17:24
通俗明了,真是好教程

查看全部评论(1)

返回顶部