zoukankan      html  css  js  c++  java
  • 行框基线位置确定(line box 基线)

    在设置vertical-align属性(只有inline元素有效,对inline-block和block元素无效)时有一个属性值:baseline,那么这个基线是什么,怎么确定。

    这个基线就是其所在行的line box基线。设置vertical-align:baseline 属性就是设置其本身元素的inline box(行内框)的基线与行框的基线对其。这里我们是确定的行框的基线,知道行框基线,那行内框基线就知道了。

    有这样一个关系

      line-height,font-size

          丨

          丨 决定

          丨

        inline box 的高度

          丨

          丨 line box 中的所有 inline box 中最高的 inline box 的顶部 和最低的 inline box 的底部高度之差就是 line box 的高度

          丨

        line box 高度

          丨

          丨 在line box 中直接写一个字母 X (这个字母不包含在其他标签里面),X的底部位置就是 line box 的基线位置

          丨

        line box 基线(补充:行高(line-height) 的值等于相邻两行基线之间的距离,行距:等于上一行底线和下一行顶线之间的距离)

          丨

          丨 知道了line box 基线,因为inline box 不设置vertical-align 情况下,默认基线是与 line box 基线对齐的,所以就知道了 inline box 的基线。(如果设置了vertical-align 

          丨其他属性值,那么基线的位置会相对line box 有所调整

        inline box 基线(有些标签的基线也不是这样确定的,如img标签的基线是图片的底部,textarea标签的基线也是底部)

    参考文章:http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

         https://www.cnblogs.com/yangjie-space/p/4858132.html

  • 相关阅读:
    M1卡的工作原理【转】
    磁卡ID卡IC卡的区别【转】
    磁卡结构【转】
    M1卡破解(自从学校升级系统之后,还准备在研究下)【转】
    RunJS演示代码
    Linux中inet_aton的问题(IP转整数)
    使用Hive UDF和GeoIP库为Hive加入IP识别功能
    hive下UDF函数的使用
    linux下smb
    使用Spring MVC表单标(转)
  • 原文地址:https://www.cnblogs.com/lauzhishuai/p/10945570.html
Copyright © 2011-2022 走看看