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

line-height属性的行内框和行框等内容介绍

2017-4-16 11:44| 发布者: 蚂蚁小编| 查看: 496| 评论: 0|来自: 蚂蚁部落

关于此属性的基本用法可以参阅css line-height属性用法深入介绍一章节。

本章节继续对此属性进行更更进一步介绍,希望能够给需要的朋友带来一定的帮助。

下面会使用一些网络上的图片,非常感谢原作者的辛勤汗水。

由于原文的转载者不够认真,导致转载后的文章出现各种各样的问题,下面重新就文章做一下总结优化,如有任何问题敬请指正。

一.顶线、中线、基线和底线概念:

line-height属性是用来设置文本的行高。行高指的是相邻的两个文本行基线间的距离,图示如下:a:3:{s:3:\"pic\";s:43:\"portal/201704/16/114556idhbbmb6hhr9xddq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的是一个综合图示,下面分别介绍一下上面的概念:

1.顶线和底线比较简单,就是文本内容顶端和低端。

2.基线是英文中的一个概念,可以联想到刚开始学习英文时候的情景,书写英文四线格中,倒数第二个可以认为是基线。

   在上图中,a、c和x底端就是基线所在的位置。

3.中线就是横向贯穿a、c和x之类字符中部的线。

二.内容框、行内框和行框概念:

1.内容框(content-box):

它围绕着文本内容,且不可见的一种box,它的大小由文本的font-size属性决定。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/16/114707rq7xyxuzhl28qy9p.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

2.行内框(inline-box):

它是一个抽象的概念,它无法显示出来,但是它确实存在,在没有其他因素影响的时候,行内框等于内容区域,而设定行高则可以增加或者减少行内框的高度,即:将行距的值(行高-字体尺寸)除以2,分别增加到内容区域的上下两边。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/16/114745jy52yhi2zygiec5y.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

3.行框(line-box):

行高可以应用在任何元素上,因此同一行内的若干元素可能有不同的行高和行内框高。

看如下代码:

[HTML] 纯文本查看 复制代码运行代码
<p style="line-height:20px;">
  行高20px。
  <strong style="line-height:50px;">行高50px。</strong>
  <span style="line-height:30px;">行高30px。</span>
</p>

a:3:{s:3:\"pic\";s:43:\"portal/201704/16/115011kw1phh2w1kpyrrir.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

所谓的行框同行内框类似,行框是指本行的一个虚拟的矩形框,其高度等于本行内所有元素中行高最大的值。


鲜花

握手

雷人

路过

鸡蛋

最新评论

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

GMT+8, 2017-6-27 16:40 , Processed in 0.056433 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部