文档章节

『转』line-height

波利beryl
 波利beryl
发布于 2014/07/16 00:18
字数 1236
阅读 134
收藏 1

先来看MDN上的总结:

  • On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.

  • On non-replaced inline elements, line-height specifies the height that is used in the calculation of the line box height.

  • On replaced inline elements, like buttons or other input element, line-height has no effect.[1]

也就是说:

  1. block level elements(块元素)上使用line-height,也就指定了块元素内部line boxes的最小高度

  2. non-replaced inline elements上使用line-heightline-height会被用来计算line boxes的高度。

  3. replaced inline elements上使用line-height没有效果。例如:button或者其它input标签。[1]

第3条规则看起来最容易理解,我们先拿它来实验下,看测试用例一:

.button-1{
    line-height: 20px;}.button-2{
    line-height: 30px;}.input-1{
    line-height: 20px;}.input-2{
    line-height: 30px;}

效果如下:出人意料的是在replaced inline elements上使用line-height居然有效果,与第3条规则不符。注意到第3条规则是有注解的。还好,注解里给出了原因:

[1] Neither engine implements the correct behavior with replaced inline elements like buttons. In some cases line-height is allowed to have an effect on them. This is incorrect behavior relative to the specification.

也就是说浏览器都没有正确的实现这一效果。按照CSS规范来看,浏览器在这一效果上都错了。

接着来看第2条规则:

  • non-replaced inline elements上使用line-heightline-height会被用来计算line boxes的高度。

至于到底如何计算,它并没有说明。在介绍计算规则之前,需要先明确几个概念。用代码说话:

<p>
    The <em>emphasis</em> element is defined as "inline".</p>

显示效果如下:enter image description here上面的代码涉及到了四种盒子:

  1. block-level boxes(块级盒),由代码中的<p>标签产生,它可以包含其它的boxenter image description here

  2. inline-level boxes(行级盒),在<p>标签中有一系列的inline-level boxes,如下:enter image description here上面的inline-level boxes可以分为两类,一类是由内联元素产生的,例如<em>enter image description here而余下的两个没有被标签包裹的inline-level boxes就被称为anonymous inline-level boxes(匿名行级盒),如下:enter image description here

  3. line box,由inline-level boxes连接而成,每一行称为一个line boxenter image description here

  4. content area,它是围绕着文字的并且看不见的一种box,它的高度取决于font-size。如下:enter image description here

概念介绍完了,回到我们的问题上:

non-replaced inline elements如何根据line-height来计算line boxes的高度

上面我们说过line box是由inline-level boxes连接而成,所以我们将问题拆成两步:

  1. 先探究line-heightinline-level boxes高度的关系

  2. 再看inline-level boxes的高度与line box高度的关系

先来看看line-heightinline-level boxes高度的关系,测试用例二: 再结合下面这张图enter image description here你应该就能看明白了。

我们把line-height: 30pxfont-size: 20px的差值10px称为行间距(英文是leading)。那么半行间距(英文是half-leading)就是10px / 2 = 5px。半行间距作用在content area的顶部和底部。enter image description here很简单,对不对?

但是别忽略了,上面计算的前提是line-height大于font-size,那如果line-height小于font-size会怎么样呢?来看测试用例三: 我们看到当line-height小于font-size时,inline-level boxes会使用line-height作为自己的高度,此时 content area溢出 inline-level boxes ,如下图所示:enter image description here那么如果将line-height设置为0会出现啥效果呢?我们以后再探究。

至此,我们说完了line-heightinline-level boxes高度的关系,接下来该看inline-level boxes的高度与line box高度的关系了。记住下面这条规则:

line box 的高度由它内部 最高的 inline-level boxesreplaced element 来决定。

来看测试用例四: 至此,我们终于清楚了line-heightline boxes高度的关系,也就清楚了MDN上第2条规则的含义:

  • non-replaced inline elements上使用line-heightline-height会被用来计算line boxes的高度。

需要补充的一点是:line boxes 在它的容器里是紧挨着彼此堆叠到一起的,看下图会更好理解一些:enter image description here最后,我们来看第1条规则:

  • block level elements(块元素)上使用line-height,也就指定了块元素内部line boxes的最小高度

理解这一条需要一点想象力,看着下图,开动你的想象力:enter image description here

想象在每一个line box的起始位置都有一个宽度为零的 inline-level boxes ,我们把这个想象出来的盒子叫做strut(这个名字来源于TeX)。strut会根据继承来的font-sizeline-height 计算本身所占高度。这个高度也就是所在line boxes的最小高度。

参考文献:

  1. http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#line-height

  2. http://www.w3.org/TR/css3-box/

  3. CSS布局

  4. 一个关于line-height非常好的PPT,本文部分图片来自这个PPT,需翻墙


本文转载自:

上一篇: 『转』
下一篇:
波利beryl
粉丝 21
博文 30
码字总数 5582
作品 0
成都
私信 提问
常用简单样式表

本文转自 simeon2005 51CTO博客,原文链接:http

科技小能手
2017/11/12
0
0
input file文字可修改兼容各浏览器

傲游浏览器中input type="file"格式 怪怪的: 以下代码可修改file中的文字;可兼容各浏览器:

技术小胖子
2017/11/02
0
0
css对ie的兼容性问题处理(一):

本文转载于:猿2048网站⇒css对ie的兼容性问题处理(一): 1.在制作sidebar时对li里面的元素进行浮动,li在ie6/7下会出现4px的间间隙: 解决方法:在li下加上vertical-align属性,值可为top...

前端老手
09/09
8
0
超级简单:在一个TextArea中如何限制行数和字符数

在网上,已经有很多关于在一个textbox限制允许的字符数量。但是如果需要,在textbox中如何去统计和限制行数呢。这里有一个解决方案,使用客户端的Javascript去限制TextArea的内容为指定的字符...

王二狗子11
2018/01/01
0
0
导航菜单高亮显示防刷新--JS特效

防刷新导航菜单高亮显示,这是基于javascript的cookie技术实现的,就是跳转了URL还是有高亮效果的,很不错 就像 牛淘返利网 导航菜单一样 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra...

西西爱OS
2012/10/15
999
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot 操作ActiveMQ

一、消息队列中间件介绍 消息队列中间件是分布式系统中重要的组件,主要解决应用耦合、异步消息、流量削锋等问题,实现高性能、高可用、可伸缩和最终一致性架构,是大型分布式系统不可缺少的...

zw965
10分钟前
2
0
本地化存储Storage

为什么会引入Storage(sessionStorage,localStorage,globalStorage) Web storage的目的是克服由cookie带来的限制,当数据需要严格控制在客户端上时,无须持续将数据发回服务器。主要是提供一...

五公里
18分钟前
5
0
Qt编写自定义控件57-直方波形图

一、前言 直方波形图控件非原创控件,控件大全中大概有20-30个控件非自己原创,而是参考了网上开源的代码,自己加以整理和完善,新增了插件的代码使得可以直接集成到QtDesigner或者QtCreator...

飞扬青云
19分钟前
2
0
或许你不知道的10条SQL技巧

这几天在写索引,想到一些有意思的TIPS,希望大家有收获。 一、一些常见的SQL实践 (1)负向条件查询不能使用索引 select * from order where status!=0 and stauts!=1 not in/not exists都不...

mskk
25分钟前
5
0
IntelliJ IDEA (Mac) 运行速度优化(JVM+localhost)

1.1. JVM 参数配置 打开 idea,菜单 –> help –> edit custom vm options,调整参数,重启即可。 具体调整参数: -Xms2g -Xmx2g -XX:ReservedCodeCacheSize=1024m -XX:+UseCompressedOops 1......

指尖Coding
34分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部