css

概念

stacking context

formatting context

• margin collapse、float仅发生在相同的 formatting context 内

containing block

• 用于宽高的计算和定位

values

• initial
• computed
• used
• actual

inherit

• 只有部分属性可继承

replaced elements

• intrinsic size
• 可以显式的设置宽高
• 元素的固有属性，无法改变

layout mode

• normal

  • block
  • inline

• float

• table

• positioned

  • layered -- z-index

• flex

• grid

• 。。。

box model

• boxes

  • box generation

    • display: none -- 不生成
    • 一般只生成一个 box：principle box
    • 少数情况还会生成额外的 box，如 list

  • 匿名 box

  • inline

    • inline level box

      • dispaly: 'inline', 'inline-table', and 'inline-block'

      • 分为两类

        • atomic inline-level boxes

          • replaced inline-level elements

            • eg: <img>

          • inline-block elements

          • inline-table elements

          • ...

        • inline box

          • eg: <span>

  • block

    • block level box

      • dispaly: block, list-item, table, flex, grid

        • block box 要除开

          • table boxes
          • flex、grid
          • replaced elements

    • block container box

      • display: block, inline-block

        • block box 要除开

          • non-replaced inline blocks
          • non-replaced table cells
          • replaced elements 不可能成为 container，因此不在讨论范围？

      • 二选一

        • 只包含 block-level boxes

          • 当混合了 block-level & inline-level elements 时，会为 inline elements 创建匿名的 block box 将其 “包裹”起来

          • 只要有一个子元素是 block level，则会创建若干匿名的 block box

            • In other words: if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.

            • 具体的“包裹”形式未定义

              • 为相邻 inline 元素创建一个 box？
              • 还是每个都创建一个 box？

        • 创建 inline formatting context，只包含 inline-level boxes

    • block box

      • 同时满足

        • block level
        • container，因此可以排除 replaced elements
        • eg: <div>

  • 注意

    • The three terms "block-level box," "block container box," and "block box" are sometimes abbreviated as "block" where unambiguous.
    • 在讨论 box 时，elements 是指它生成的 principle box

• boxes 详解

  • inline

    • inline level box

      • inline box

        • 折行 word wrap

          • 拆分为多个 line box

            • 紧挨着，没有间隙，也不会重叠

          • 视觉效果

            • When an inline box is split, margins, borders, and padding have no visual effect where the split occurs (or at any split, when there are several).

          • propertyies

            • white-space
            • word-break

        • 不会完整应用 box model

          • 无法设置宽高

          • margin-padding-border

            • 水平方向：效果同 block
            • 垂直方向：只有视觉效果，但无法影响 line box 的高度

      • atomic inline-level box

    • line box

      • w3: 9.4.2 Inline formatting contexts

      • strut

      • baseline

        • inline box

        • inline-block box

          • with text
          • without text

      • height

        • 见下面

      • width

        • containing block & floats

        • width 不够

          • vertical stack of line boxes

            • 紧挨着，没有间隙，也不会重叠

        • width 充足

          • align-text

            • justify 尝试无效？

      • 与 inline level box 的关系

        • 包含 inline level box 的个数

          • 0

            • Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

          • 1+

            • 见下面的 height of a line box

        • inline box 可能被拆分（注意，这里没有 level），see 折行 word wrap

      • height of a line box，规范并没有明确，但有几个原则。w3: 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

        • 1、The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)

        • 2、按照 vertical-align 对齐

          • top/bottom 对齐的要同时保证高度最小；

            • 足够高时可能导致 baseline 不确定

        • 3、The line box height is the distance between the uppermost box top and the lowermost box bottom.

      • w3: 10.8.1 Leading and half-leading

        • font metrics

          • A/D, 根据 baseline 分隔

            • eg: 当 font-size: 16px; line-height: 1; 时，A+D = 16px, line box's height = 16

              • 此时大部分字体应该都会重叠

            • half-leading: ( line-height - AD)/2

              • 注意，可能为负数

          • 是字体的整体属性，不针对单个 glyph

          • inline box height, 不受子元素影响

            • The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly 'line-height'. Boxes of child elements do not influence this height.

            • inline-level 的子孙元素按照 DOM 顺序布局

              • 深度优先，前序遍历

            • block-level 的子孙元素

          • http://a.fe.my/css/inline/vertical-align/line-box-height.html

      • properties

        • line-height

          • inherited

        • vertical-align

        • text-align

  • block

visual formatting mode

key properties

• display

  • 两值语法，目前大多数浏览器并不支持，但可以通过其更好的理解 display 的含义

    • outer type

      • 指定自身在当前参与的 block formatting context 的 type
      • 只有 inline/block 两种值
      • 也就是说，用于其他 formatting context 时无意义。如 flex grid

    • inner type

      • 指定用于子元素布局的 formatting context

        • flow
        • flow-root
        • table
        • flex
        • grid

      • 用于 replaced elements 无意义

    • 对应关系

      • display: block; -> block flow; display: inline; -> inline flow; display: inline-block; -> inline flow-root; display: flex; -> block flex; display: inline-flex; -> inline flex; display: grid; -> block grid; display: inline-grid; -> inline grid; display: flow-root; -> block flow-root;

  • 穷举

    • replaced element

    • non-replaced element

      • TODO: list

• float

• position

• 三者关系

layout & render

css levels

2.1

2.2

3

• 各个module独立发展

js api

XMind: ZEN - Trial Version