CSS系列 - 包含块

81 阅读1分钟

元素的尺寸及位置,常常会受它的包含块所影响

根元素(很多场景下可以看成是<html>)被称为“初始包含块”,其尺寸等同于浏览器可视窗口的大小

百分比

  • 子 width = 父 width
  • 子 height = 父 height
  • 子 margin = 父 width
  • 子 padding = 父 width

position

  • static 、 relative、sticky

    最近的父级块元素

  • absolute

    最近的 position 的值不是 static (也就是值为 fixed, absolute, relative 或 sticky)的祖先元素的 padding 的边缘组成, 百分比计算规则父元素宽度需要包含 padding

  • fixed

    • 在连续媒体的情况下包含块是 viewport
    • 分页媒体下的情况下包含块是分页区域
  • absolute 或 fixed

    • transform 或 perspective 的值不是 none
    • will-change 的值是 transform 或 perspective
    • filter 的值不是 none 或 will-change 的值是 filter(只在 Firefox 下生效)
    • contain 的值是 paint 最近父级元素的内边距区的边缘