那些不曾了解的CSS——02

包含块

• 概念
  大多数情况下，一个元素的包含块就是最近的祖先块元素(Block Element)的内容区(content box)
• 包含块的影响
  当元素的以下属性：
  • width, height, padding, margin
  • position为absolute或者fixed
    的值为百分比时，其计算值都是以包含块为基础的
• 如何确定包含块
  包含块的确定完全依赖于这个元素的position属性
  • static或relative
    包含块就是最近的祖先块元素，或者格式化上下文的内容区
  • absoute
    包含块就是最近的position不是static的祖先元素的内边距
  • fixed
    包含块是当前视窗(viewport)
  • 如果是absolute或fixed
    包含块就是最近的transform或perspective的值不是none的祖先元素的内边距
• 根据包含块计算百分比值
  • 要计算 height top 及 bottom 中的百分值，是通过包含块的height的值。如果包含块的height值会根据它的内容变化，而且包含块的position属性的值被赋予relative或static，那么，这些值的计算值为0
  • 要计算 width, left, right, padding, margin 这些属性由包含块的 width 属性的值来计算它的百分值。