HTML与CSS笔记-3(完）

层叠上下文

• 一个元素具备一下任意条件，该元素会创建层叠上下文
  • 根元素
  • z-index不为auto的定位元素
• 同一层叠上下文的背景色、浮动子元素、定位子元素等堆叠顺序

	同一层叠上下文，层叠级别由高到低
↓ 正z-index		z-index为正的内部元素
↓ z-index为0		z-index为0的内部元素
↓ 行内盒子	(内容)	普通文档流下的行内盒子
↓ 浮动盒子	(布局)	除position:relative的浮动盒子
↓ 块盒子	(布局)	普通文档流下的块盒子
↓ 负z-index		z-index为负的内部元素
↓（父级）背景和边框	(装饰)	当前层叠上下文的背景和边框

层叠上下文的特点

• 一个元素的Z轴方向上的堆叠顺序，由层叠上下文和层叠级别两个因素决定
• 同一层叠上下文中，比较的是内部元素层叠级别，级别大的在上
• 同一层叠上下文中，层叠级别相同，遵循『后来居上』原则
• 不同 层叠上下文，比较父元素层叠级别

BFC(块级格式上下文) 和 IFC(行级格式上下文)

任何元素可看成盒子，普通文档流中，盒子会参与格式上下文。
盒子只能是行内盒子inline-level box 或是块盒子block-level box其中一种，并对应参加IFC或是BFC。

• 盒子

  • 行内盒子inline-level box 创建BFC
    • inline
    • inline-block
    • inline-table
  • 块盒子block-level box 参与BFC
    • block
    • table
    • list-item
  • run-in box

• 格式上下文

  • 页面中的一块有自己渲染规则的区域

• 块级格式上下文BFC创建条件（任一）

  • 根元素
  • float属性除none以外的值
  • position属性除static和relative以外的值
  • overflow属性除了visible以外的值
  • 元素类型inline-block,table-caption,table-cell

• 块级格式上下文BFC特点

  • 在同一BFC中，盒子自顶向下排列，垂直距离由margin决定，且相邻的盒子垂直外边距（不是相邻的兄弟元素）会叠加
  • 在同一BFC中，每个一个盒子左外边界紧贴容器左边，即使存在浮动元素
  • 计算BFC高度时，内部浮动子元素的高度也会参与计算

• BFC应用

  • 清除相邻垂直外边距叠加
  • 清除浮动引起的塌陷
  • 避免文字环绕
  • 创建自适应两列布局