• 行高计算


    行高计算

    在行内格式化上下文中,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不参与行高计算。它们仍然渲染在行内盒子周围。

  • 相关阅读:
    CentOS设置密码复杂度及过期时间等
    CentOS开启telnet连接
    Centos6.5升级openssh至7.4版本
    Centos7搭建SVN服务器
    Centos7.2yum安装时候出现db5错误的解决办法
    在Centos中yum安装和卸载软件的使用方法(转)
    Centos6.5 恢复误删的系统面板
    ecmall 2.3.0 最新补丁20140618
    ecmall在linux下的安装注意事项(转)
    PHP Strict standards:Declaration of … should be compatible with that of…(转)
  • 原文地址:https://www.cnblogs.com/diaoxiong/p/5685648.html
Copyright © 2020-2023  润新知