zoukankan      html  css  js  c++  java
  • 行高计算

    行高计算

    在行内格式化上下文中,UA把行内级别的盒子放入行框组成的竖直堆栈。行框的高度由下面规则确定:

    1.计算每个行内级别元素的高。对可替换元素、行内块元素、行内表格元素,这个高是它们的marign 盒子的高;对行内盒子来说,这是它们的行高。(参阅:leading,行内盒子的高,高和margin的计算)
    
    2.行内级别的盒子根据'vertical-align'属性竖直对齐。当‘top',’bottom‘对齐的时候,可以减少行高。
    3.行框的高是框最上面到框最下面之间的距离。(包括strut)
    
    空的行内元素产生空行内盒子,但是这些盒子依然由margin,padding,border和行高,这些同样会影响行框的计算。
    

    Leading 和 half-leading

    CSS假设每一个字体都有字体大小,这指定特定的高在基线上面和深在下面。在这里,我们用A指代高(对给定大小的字体)D指代深度。定义 AD= A + D(AD,从上到下的距离)

    UA以相应字体的基线来对齐这些在非替换行内盒子中的字体。然后,对每个字,计算A和D。一个元素中的字可以有不同字形,因此不需要都有相同的A和D。如果一个行内盒子不包含字,这个盒子包含的是strut(一个0宽的不可见字)。这个strut有这个元素第一个可用字体的A和D。

    对每个字符,通过 L=‘line-height’ - AD来计算leading。一半的leading在A上面,一半的leading在D下面。

    Leading 可能为负值
    

    尽管非替换元素的margin,border,padding不参与行高计算。它们仍然渲染在行内盒子周围。

  • 相关阅读:
    使用图形化界面打包自己的类库
    搭建自己的NuGet服务器,上传自定义NuGet包
    在内部架设NuGet服务器
    Prism简介
    Nhibernate Icreteria 分页查询
    uDig介绍
    基于Geoserver配置多图层地图以及利用uDig来进行样式配置
    如何在GeoServer上发布一张地图
    XML的SelectNodes使用方法以及XPath
    coded ui run in interactive mode
  • 原文地址:https://www.cnblogs.com/diaoxiong/p/5685648.html
Copyright © 2011-2022 走看看