`
cindylu520
  • 浏览: 148098 次
  • 性别: Icon_minigender_2
  • 来自: 大连
社区版块
存档分类
最新评论

深入了解css的行高Line Height属性

    博客分类:
  • CSS
阅读更多

什么是行间距?

 古时候我们是用印刷机来处理文字,印出来的每个字都位于独立的一个块里。

行间距,即传说中控制两行文字之间垂直距离的东东。

在CSS,line-height被用来控制行与行之间的垂直距离。

不过行间距与半行间距还是取决于CSS中的line-height。

那么如何来使用line-height?

默认状态,浏览器使用1.0-1.2 line-height .这是一个初始值。

 

你可以定义CSS里的line-height属性来覆盖默认值

 

p { line-height:140%; }

 

你可以用5种方式来定义line-height:

1、line-height可以被定义为normal。

body { line-height:normal; }

 

2、line-height可以被定义为继承

 

p { line-height:inherit; }

 

3、line-height可以使用一个百分比的值

 

p { line-height:120%; }

 

4、line-height可以被定义为一个长度值(单位px、em等)

 

p { line-height:20px; }

 

5、line-height也可以被定义为纯数字(甚至没有单位)

 

p { line-height:1.2; }

 

 

缩写line-height

那5种line-height值也可以在font属性里缩写

line-height值紧跟着font-size值,使用斜杠隔开<font-size>/<line-height>

举例来说......

值normal

 

 body { font:100%/normal arial; helvetica, sans-serif; }

 

值百分比

 

body { font:100%/120% arial; helvetica, sans-serif; }

 

值长度

 

body { font:100%/20px arial; helvetica, sans-serif; }

 

值纯数字

 

body { font:100%/1.2arial; helvetica, sans-serif; }

 

计算line-height

有些CSS属性是可继承(inherited)(从层叠的元素里传递下来)

这样设计是为了方便开发者

于是他们不用为所有后代元素再设置一次

例如:color属性是可继承的。如果body被定义了color,那么它会传递给页面里的所有元素

对于line-height继承会有一点复杂

为了更好的演示line-height的各种用法

使用如下的HTML代码

<h1> consect etuer adipi scing .... </h1>

<p> Lorem ipsum dolor sit amet .... </p>

<div id="footer"> Duis autem vel eum .... </div>

 

这些代码有着如下文档树结构

我们同时使用如下CSS

(注:文字大小使用像素是为了看起来简单,尽管不推荐这么干!)

body { font-size:16px; line-height:XXX; } 
h1 {font-size:32px;} 
p {font-size:16px;} #footer {font-size:12px;}

  

例1:值百分比

line-height被设置为百分比(120%)

body { font-size:16px; line-height:120%; } 
h1 {font-size:32px;} 
p {font-size:16px;} 
#footer {font-size:12px;} 

 

line-height的百分比(120%)和body的文字大小(16px)被用来计算值(16px*120%=19.2px)这个计算出来的值会被层叠下去的元素所继承

所有继承下来的元素会忽略本身的font-size,而使用相同的,计算出来的line-height.

line-height不会随着相关的font-size做相应的比例缩放

例2、值:长度

line-height被设置成一个长度值(20px)

body { font-size:16px; line-height:20px; } 
h1 {font-size:32px;} 
p {font-size:16px;} 
#footer {font-size:12px;} 

 

长度值20px会被后代继承

 

所有继承下来的元素会忽略本身的font-size,而使用相同的,继承的line-height

line-height还是不会随着相关的font-size做相应的比例缩放

例3、值:normal

line-height被设置为normal(约为1.2)

 

 

 

body { font-size:16px; line-height:normal; } 
h1 {font-size:32px;} 
p {font-size:16px;} 
#footer {font-size:12px;} 

 

 在本例中使用继承的计算出来的值还不如用值normal,浏览器在解释normal的时候会有细微差别。

现在所有继承下来的元素不会忽略本身的font-size,而使用基于font-size算出来的line-height



 现在,line-height会随着相关的font-size做相应的比例放缩


但是,如果你既想要normal的灵活,又想要设置一个自定义的值这时候就得指望值:纯数字
 例4、值:纯数字

line-height被设置为值:纯数字(1.5)

body { font-size:16px; line-height:1.5; } 
h1 {font-size:32px;} 
p {font-size:16px;} 
#footer {font-size:12px;} 

 

在本例中用继承的计算后的值,倒不如用系数(1.5)

现在所有继承下来的元素使用基于font-size算出来的line-height



 再一次,line-height会随着相关的font-size做相应的比例缩放



 

 

 

 那么哪一种是最好的方案?

一般来说,设置行高为值:纯数字是最理想的方式。因为其会随着对应的font-size而放缩

在多种情况下,很难确定一个完美的line-height,但无论如何,保守估计标题是没有段落那么的需要自适应line-height

举例来说,所有内容被定义为1.5,标题被定义为1.2.

 

body {line-height:1.5} h1,h2,h3,h4,h5,h6 {line-height:1.2}

 万维网内容可存取性指南(WCAG)2.0规定“段落中的行距至少要1.5倍”,这意味着如果要达到AAA等级,行高应为1.5.

深入line-height

为了深入了解line-height,我们需要先来了解 CSS boxes的各种类型

我们从一段简单的HTML代码开始

 

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

 

这些代码在大多数浏览器下应该会被渲染成下图



 这个例子中涉及到4个boxes

box类型1:containing boxes

这个例子中段落就是一种containing boxes,它包含了其他boxes。

 



 box类型2:inline boxes

在段落内有一系列的inline boxes



 inline boxes 不会让内容显示成块形式,而是排成一行。

emphasis 元素就是一种inline boxes

 



 其他没有特别标签的box被称为拟名inline boxes



 box类型3:line boxes

inline boxes在containing boxes里一个接一个组成了line boxes



 box类型4:content area

content area是围绕着文字的看不见的一种box,他的高取决于font-size



 inline boxes与inline-height

行高基于一则简单小配方,应用在inline boxes上。

1.line-height和font-size的差别可以从下面的例子中看出

例:

font-size:16px;

line-height:20px;

差别:4px(即行间距)

2.拆分行间距,来创建一个半行间距

4px行间距/2 = 2px半行间距

3.半行间距会被应用在content area 的顶部和底部



 但有的时候情况会有一点点的复杂

content box包裹着line box,而半行间距位于content box 的上部和下部。

 

 

 



 

然而有时候inline box 会小于content area!

举例来说,如果line-height 小于 font-size,inline box 会优先于行高

例:

font-size:16px;

line-height:12px;

inline box 高度:12px

content area 会溢出,inline box的顶部和底部半行高会折叠起来以保证inline box的高度



 line box的一些注解

line box的高度取决于它内部最高的inline box (或被替换的元素)

最高的inline box 可以是匿名inline box

 

 

 



 

也是可以增加line-height后的inline box



 还可以是更大font-size的inline box



 或存在上标或下标

 

 

 

 



 或,甚至存在可替换元素,例如一张图



 line box在containing box宽度内靠着彼此的颈部堆积

 

 

 



 

最后,总结

 

上标和下标

上标和下标有时候会强制影响line box 使其高度异常。



 你可以把line-height设置为0来解决这个问题,那样会移除元素的上下半行间距

 

sup,sub {ine-height:0;}

 

IE6,line-height和内联图片

IE5/6错误的移除了内联图片的顶部半行间距



 搞定这玩意儿,需要点技术含量。如果有必要的话,给图片设置顶部的margin值,以模拟顶部半行间距。这个顶部的margin应该只针对于IE5/6(使用条件注释)

 

 

 

(转:http://www.maxdesign.com.au/

 

  • 大小: 20.4 KB
  • 大小: 30.8 KB
  • 大小: 36 KB
  • 大小: 29.9 KB
  • 大小: 28.7 KB
  • 大小: 33.4 KB
  • 大小: 35 KB
  • 大小: 31.7 KB
  • 大小: 30.8 KB
  • 大小: 33.1 KB
  • 大小: 27.9 KB
  • 大小: 34.8 KB
  • 大小: 37.6 KB
  • 大小: 32.9 KB
  • 大小: 36.7 KB
  • 大小: 41.9 KB
  • 大小: 25.7 KB
  • 大小: 34.6 KB
  • 大小: 23.6 KB
  • 大小: 36.8 KB
  • 大小: 25.1 KB
  • 大小: 26.9 KB
  • 大小: 34.1 KB
  • 大小: 23.7 KB
  • 大小: 36.7 KB
  • 大小: 55 KB
  • 大小: 22.7 KB
  • 大小: 51.5 KB
分享到:
评论

相关推荐

    深入理解CSS行高line-height与文本垂直居中的原理

    在CSS中,行高(line-height)属性用于控制文本行之间的垂直间距,它直接影响到文本的排版和可读性。行高与文本垂直居中的原理紧密相关,尤其是在布局设计中非常重要的垂直居中技术。当行高被设置为与容器高度相等时...

    css属性行高line-height的用法详解

    在本文中,我们将详细介绍line-height属性的五种不同用法,包括如何在CSS中设置行高,以及line-height的继承性与计算方式。 首先,line-height属性可以被定义为normal,这是浏览器的默认值,通常情况下,这个默认值...

    CSS行高line-height的个人理解

    CSS中的行高(line-height)是设计网页和应用中排版的一个重要属性,它不仅影响着文本的可读性,也影响着页面的布局和整体美感。接下来,将深入探讨关于line-height的一些概念和实际应用的理解。 一、行高的字面意思 ...

    CSS教程:行高line-height属性(1)

    相关文章:CSS教程:行高line-height属性(2) 行高的概念看上去很简单——文字行的高度,其实,行高所涉及到的基础知识,对于今后理解其它属性也很重要。 大片密密麻麻的文字往往会让人觉得乏味,因此适当地调整...

    全面了解css行高line-height的用法

    CSS中的`line-height`属性是用于设置元素内部行与行之间的垂直间距,它对文本的可读性和布局的美观性有着重要影响。行高不仅决定了文本行之间的距离,还参与了元素内行框的布局计算。 一、`line-height`语法 `line-...

    CSS教程:行高line-height属性(2)

    相关文章:CSS教程:行高line-height属性(1) 7.3.3行高的计算与继承 以em、ex和百分比为单位的行高,其基数是元素本身的字体尺寸。例如有代码如下: 字高20px,行高2em。&lt;/p&gt; 字高30px,行高2em。 2个段落的行高都...

    关于css中line-height(行高)设置无效的问题的解决方法

    在CSS(层叠样式表)中,`line-height` 是一个非常重要的属性,它用于设置元素内文本行之间的垂直间距。然而,在某些情况下,我们可能会遇到`line-height`设置无效的问题,这通常与CSS的解析顺序和优先级有关。本文...

    tinyMCE富文本编辑器line-height行高插件

    本文将深入探讨TinyMCE中的“line-height”行高插件,以及如何将其集成到编辑器中。 首先,我们来了解TinyMCE的行高插件。行高(line-height)是排版中的一个重要属性,它决定了文本行之间的垂直间距。合理设置行高...

    CSS line-height行高上下居中垂直居中样式属性

    **CSS line-height属性详解:行高与垂直居中** 在网页设计中,`line-height` 是一个非常重要的CSS样式属性,用于控制元素内部文本行之间的垂直间距,它可以帮助实现文字和图片的上下居中,以及单行或多行文本的垂直...

    CSS中的line-height行高属性学习教程

    在CSS布局中,line-height属性扮演着至关重要的角色,它主要负责控制文本的行间距,影响着页面的可读性和视觉美观。行高属性(line-height)定义了文本行基线之间的垂直距离,从而影响了文本块的整体排版。本文将...

    美工之路 网页设计视频教程CSS篇-16.文本:行高line-height.rar

    美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计爱好者量身定制的,本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇.不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值,使...

    CSS布局中设置字体文字大小值大于行高值.docx

    这些样式属性可以与 `line-height` 和 `font-size` 结合使用,以达到更好的文字显示效果。 七、总结 在 CSS 布局中,设置字体文字大小值大于行高值是非常重要的。这样可以避免文字之间的重叠和不完整显示的情况,...

    CSS中的line-height行高属性的使用技巧小结

    CSS中的line-hight属性是用来控制文本行之间的空隙的。它一般情况下没有单位的设定(如:line-height:1.4;)所以这是一个按字体尺寸的比例来计算。这对印刷版来说是一个很重要的属性。线条过低就会挤在一起,线条过...

Global site tag (gtag.js) - Google Analytics