如何渲染行内非替换元素

除了块级元素,最常见的就是行内元素了。常见的行内元素有a、span、em等标签,这些都是行内非替换元素,img标签也属于行内元素,不过它属于替换元素。

行内元素相对于块级元素更加复杂,一些行内元素的行为不容易理解,这是因为行内元素实现的规范的制定既要满足创作人员对其更多的行为要求,又要兼容旧有的行为,承前启后。

理解行内元素之前,一些关于它的关键术语需要知道并且完全理解其含义。

匿名文本

匿名文本是指所有未包含在行内元素中的字符串,注意,空格也是匿名文本的一部分,因为空格与其他字符一样都是正常的字符。

em框

em框也称为字符框,其在字体中定义。实际的字形可能比其em框更高或更矮。在css中,font-size的值确定了各个em框的高度。

内容区

在非替换元素中,内容区可能有两种,css2.1规范允许用户代理选择其中任意一种。内容区可以是元素中各个字符的em框串在一起构成的框,也可以是由元素中的字符的字形描述的框。在替换元素中,内容区就是元素的固有高度再加上可能有的外边距、边框或内边距。

行间距

行间距是font-size值和line-height值之差 。这个差实际上要分为两半,分别应用到内容区的顶部和底部。为内容区增加的这两部分分别称为半间距。行间距只应用于非替换元素。

行内框

这个框通过向内容区增加行间距来描述。对于非替换元素,元素的行内框的高度刚好等于line-height的值。对于替换元素,元素行内框的高度则恰好等于内容区的高度,因为行间区不应用到替换元素。

行框

这是包含该行中出现的行内框的最高点和最低点的最小框。行框的上边界要位于最高行内框的上边界,而行框的底边要放在最低行内框的下边界。


css规范还提供了一些有用的概念。

  • 内容区类似于一个块级元素的内容框。

  • 行内元素的背景应用于内容区及所有内边距。

  • 行内元素的边框要包围内容区及所有内边距和边框。

  • 非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果,它不会影响元
    素行内框的高度,也不会影响包含该元素的行框的高度。

  • 替换元素的外边距和边框确实会影响该元素行内框的高度,也可能影响包含该元素的行框的高度。

  • 行内框在行中根据其vertical-align属性值垂直对齐。


站在用户代理(浏览器)的角度,了解如何确定行内元素中各个部分的高度的,用户代理在渲染前端页面时遇到行内元素必须执行以下运算,所以可见,前端工程师写出易于用户代理理解和友好的html结构和css样式甚至减少的js动态更新元素对页面渲染的性能的提升是多么的有帮助。

构造行框四步骤

1、按以下步骤确定行中各元素行内框的高度:

1)得到各行内非替换元素及不属于后代行内元素的所有文本的font-size值和line-height值,再将line-height减去font-size,这就得到了框的行间距。这个行间距除以2,将其一半分别应用到em框的顶部和底部。

2)得到各替换元素的height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-width、border-bottom-width值,把他们加在一起。

2、对于各内容区,确定他在整行基线的上方和下方分别超出多少。这个任务并不容易:你必须知道各元素及匿名文本各部分的基线的位置,还要知道该行本身基线的位置;然后把它们对齐。另外,对于替换元素,要将其底边放在整行的基线上。

3、对于指定了vertical-align值的元素,确定其垂直偏移量。由此可知该元素的行内框要向上或向下移动多远,并改变元素在基线上方或下方超出的距离。

4、既然已经知道了所有行内框会放在哪里,再来计算最后的行框高度。为此,只需将基线与最高行内框顶端之间的距离加上基线与最低行内框底端之间的距离。


从css属性的角度探讨这些属性值如何帮助我们改变行内元素的显示效果。
  • vertical-align

    • top 将元素行内框的顶端与包含该元素的行框的顶端对齐。

    • bottom 将元素行内框的底端与包含该元素的行框的底端对齐。

    • text-top 将元素行内框的顶端与父元素内容区的顶端对齐。

    • text-bottom 将元素行内框的底端与父元素内容区的底端对齐。

    • middle 将元素行内框的垂直重点与父元素基线上0.5ex处的一点对齐。

    • super 将元素的内容区和行内框上移。上移的距离因用户代理的不同而不同。

    • sub 与super相同,只不过元素会下移而不是上移。

    • percentage 将元素上移或下移一定距离,这个距离由相对于元素line-height值的一个百分数确定。

  • line-height

    • line-height用于改变行间距,line-height相对于元素本身的font-size设置,而不是相对于父元素设置。

    • 为line-height设置缩放因子属性值,该值将被后代元素继承,最终的line-height值为缩放因子乘以font-size的值。使用缩放因子可以避免由于设置固定的行间距但是行内存在大小不一的内容区时出现的行与行重叠的问题。


总结

1、各行框的具体高度取决于其组成元素相互之间如何对齐,这种对齐往往很大程度上依赖于基线落在各元素(或匿名文本各部分)中的哪个位置。因为这个位置确定了其行内框如何摆放。

2、基线在各em框中的位置对于不同的字体是不同的,这个信息内置在字体文件中,除非直接编辑字体文件,否则无法修改。

3、要得到一致的基线间隔,这更像是一门艺术而不只是一门科学。

授权账号 » 
原创声明 » 未经授权,请勿复制转载,谢谢配合
联系方式 » 
微信:huazi19930927
邮箱:lanserdi@163.com
发布日期 » 2018年1月12日 周五
Github账号登录以留言