CSS advanced 101

开始之前...

吾日三省吾身

• 我懂 CSS 吗？
• 我喜欢 CSS 吗？
• 我和 CSS 能成为好朋友吗？

什么是 FC ？

BFC

(Block Formatting Context: 块级格式化上下文)

下面哪个选项不会生成BFC？

1. display: blcok
2. display: inline-block
3. display: tabel-cell | table-caption
4. position: absolute | fixed
5. overflow 为除 'visible' 之外的值

Answer is: 1

1. 内部的BOX会在垂直方向上一个接一个的放置
2. 垂直方向上的距离由margin决定（完整的说法是：属于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关。） Example
3. 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。（这说明BFC中的子元素不会超出它的包含块，而position为absolute的元素可以超出它的包含块边界）
4. BFC的区域不会与float的元素区域重叠 Example
5. 计算BFC的高度时，浮动子元素也参与计算 Example
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

Controlling box

(block level)

• Block level elements (display: block | list-item | table)
• Block level boxes (Block level elements which participate in a block formatting context)
• Block container boxes (except table and replaced elements, the block level boxes also called block container boxes)
• Block boxes (Block-level boxes that are also block containers are called block boxes)
• Anonymous block boxes

Controlling box

(inline level)

• Inline level elements (display: inline | inline-table | inline-block )
• Inline level boxes (Inline level elements which participate in a inline formatting context)
• Inline boxes (A non-replaced element with a 'display' value of 'inline' generates an inline box)
• Inline atomic boxes (Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes )
• Anonymous inline boxes

IFC

(Inline Formatting Context: 行内级格式化上下文)

IFC 有哪些特点

1. inline box 必须水平一个接一个放置
2. inline box 之间水平的 border、padding、margin 都是有效的 Example
3. inline box 可以以不同的 vertical align 方式对齐 Example
4. 包含来自同一行的矩形区域叫做 line box Example
5. line box 的宽度由包含块和 float 元素共同决定 Example

IFC 有哪些特点

1. line box 的高度总是足够包含其包含的 inline box
2. 当多个 inline box 不能在一行搁下时，它们会被放在几个水平堆叠的line box 中
3. line box 中的 inline box 加起来的宽度没有 line box 宽时，它们的水平对齐方式有 text-align 决定
4. 当line box 无法被分割时，可以溢出

如何生成IFC呢？

个人认识：当container 中所有的 box elements 均为 inline boxes 或 atomic inline boxes 或 Anonymous inline boxes 时则会生成 IFC

Stacking Context

(层叠上下文)

• the background and borders of the element forming the stacking context.
• the child stacking contexts with negative stack levels (most negative first).
• the in-flow, non-inline-level, non-positioned descendants.
• the non-positioned floats.
• the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
• the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
• the child stacking contexts with positive stack levels (least positive first).

• 根元素 (HTML)
• z-index 值不为 "auto"的 绝对/相对定位
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)
• opacity 属性值小于 1 的元素
• transform 属性值不为 "none"的元素
• mix-blend-mode 属性值不为 "normal"的元素
• filter值不为“none”的元素
• perspective值不为“none”的元素
• isolation 属性被设置为 "isolate"的元素
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
• -webkit-overflow-scrolling 属性被设置 "touch"的元素

Q&A

Thanks.