包含块

确定包含块

一般情况：元素的包含块是最近的祖先块元素的内容区域

特殊情况：元素的包含块完全由这个元素的position属性确定

  1. positon: relative、static、sticky
  • 包含块可能是它的最近的祖先块元素的内容区的边缘组成（inline-block, block 或 list-item 元素）
  • 可能会建立格式化上下文 (比如说 a table container, flex container, grid container, 或者是 the block container 自身）
  1. positon: absolute
  • 包含块由它最近的positon的值不是static的祖先元素的内边距的边缘组成（fixed、absolute、relative、sticky）
  1. positon: fixed
  • 连续媒体包含块是viewport
  1. postion: absolute、fixed 包含块由满足以下条件的最近父级元素的内边距边缘组成
  • transform、perspective的值不为none
  • will-change的值是 transform、perspective
  • filter的值不是none或will-change的是filter（firefox下有效）
  • contain的值是paint
  • backdrop-filter的值不是none
备注：根元素 (<html>) 所在的包含块是一个被称为初始包含块的矩形。
他的尺寸是视口 viewport (for continuous media)

根据包含块确定百分比值

  1. height、top、bottom的百分值根据包含块height计算（如果包含块的height根据内容变化，而且包含块的positon是relative/static，那么这些值的计算值为auto）
  2. width、left、right、margin、padding这些属性的百分比的计算值通过包含块的width计算

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block
https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport

posted @ 2023-10-17 11:58  躺尸的大笨鸟  阅读(21)  评论(0)    收藏  举报