• css学习笔记二--IFC


    IFC

    w3c规范

    如果一个line box里没有文字、保留的空格、非0的margin或padding或border的inline元素、或其他in-flow内容(比如图片、inline-block或inline-table元素),且不以保留的换行符结束的话,就会被视作高度为0的line box。

    font-size

    font-size 相同,font-family 不同,得到的 span 元素的高度也不同:

    EM_Square: 字模的高度被称为“em”,起源于大写的字符“M”的宽度;这个字母的比例被做成了方形(因此有了“EM Square”的称呼)

    子元素的字体大小单位若为em,则是相对于父元素的字体大小来计算的。
    元素除了字体大小以外的其他属性用到了em单位,则是相对于自身字体大小计算的

    line-height

    每行内容由多个内联元素组成(内联标签或者是包含文本的匿名内联元素),每一行都叫做一个 line-box。line-box 的高度是由它所有子元素的高度计算得出的。浏览器会计算这一行里每个子元素的高度,再得出 line-box 的高度(具体来说就是从子元素的最高点到最低点的高度),所以默认情况下,一个 line-box 总是有足够的高度来容纳它的子元素。

    每个 HTML 元素实际上都是由多个 line-box 的容器,如果你知道每个 line-box 的高度,那么你就知道了整个元素的高度。

    line-box 计算的一些细节:

    对于内联元素,padding 和 border 会增大 background 区域,但是不会增大 content-area(不是 line-box 的高度)。一般来说你无法再屏幕上看到 content-area。margin-top 和 margin-bottom 对两者都没有影响。
    对于可替换内联元素(replaced inline elements)、inline-block 元素和 blockified 内联元素,padding、margin 和 border 会增大 height(译者注:注意 margin),因此会影响 content-area 和 line-box 的高度

    vertical-align

    vertical-align:baseline,表示与字体中 x的下边缘 对齐
    vertical-align:middle,表示与字体中 x的下边缘+ x高度的一半 对齐
    vertical-align: top / bottom,表示与 line-box 的顶部或底部对齐
    vertical-align: text-top / text-bottom,表示与 content-area 的顶部或底部对齐

    幽灵空白节点 strut

    ​“幽灵空白节点”实际上也是一个盒子,不过是个假想盒,名叫“strut”,中文直译为“支柱”,是一个存在于每个“行框盒子”前面,同时具有该元素的字体和行高属性的0宽度的内联盒。

    ​这里有一个前提,文档声明必须是HTML5文档声明,如果还是很多年前的老声明,则不存在“幽灵空白节点”

  • 相关阅读:
    模拟电梯运行
    用户需求调研报告
    NABC需求分析
    大道至简---读书随笔3
    二维环形数组求最大子数组和
    结对开发之求最大数组溢出问题
    结对开发之环形数组
    结对开发之电梯调度
    我看“微软拼音”
    团队开发项目之典型用户和用户场景
  • 原文地址:https://www.cnblogs.com/SLchuck/p/13754381.html
Copyright © 2020-2023  润新知