如何确定一个元素的包含块(containing block)

前端面试笔试题分类: CSS如何确定一个元素的包含块(containing block)
0
前端学堂 管理员 asked 1年 ago

1 Answers
0
前端学堂 管理员 answered 1年 ago

 

  1. 根元素的包含块叫做初始包含块,在连续媒体中他的尺寸与viewport相同并且anchored at the canvas origin;对于paged media,它的尺寸等于page area。初始包含块的direction属性与根元素相同。
  2. positionrelative或者static的元素,它的包含块由最近的块级(displayblock,list-itemtable)祖先元素的内容框组成
  3. 如果元素positionfixed。对于连续媒体,它的包含块为viewport;对于paged media,包含块为page area
  4. 如果元素positionabsolute,它的包含块由祖先元素中最近一个positionrelative,absolute或者fixed的元素产生,规则如下:

    • 如果祖先元素为行内元素,the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.
    • 其他情况下包含块由祖先节点的padding edge组成

    如果找不到定位的祖先元素,包含块为初始包含块

Your Answer

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏