CSS定位之——什么是包含块?

2 篇文章 0 订阅
2 篇文章 0 订阅
一、包含块简单说就是定位参考框或者定位坐标参考系,元素一旦定义了定位显示(相对、绝对、固定)都具有包含块性质,它所包含的定位元素都将以该包含块为坐标系进行定位和调整。

二、包含块是视觉格式化模型的一个重要概念,它与框模型类似,也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。
三、原理:一个元素盒子的位置和大小有时是通过相对于一个特定的长方形来计算的,这个长方形就被称之为元素的 containing block。一个元素的 containing block 按以下方式定义:
1、用户代理选择根元素作为包含块(称之为初始 containing block)。
2、对于其它元素,除非元素使用的是绝对位置,包含块由最近的块级祖先元素盒子的内容边界组成。
3、如果元素有属性 'position:fixed',包含块由视口建立。
4、如果元素有属性 'position:absolute',containing block 由最近的 position 不是 static 的祖先建立,按下面的步骤:
a、如果祖先是块级元素,由祖先的 padding edge 形成。
b、如果祖先是内联元素,取决于祖先的 direction 属性。
⑴如果 direction 是 ltr(左到右),祖先产生的第一个盒子的上、左内容边界是包含块的上方和左方,祖先的最后一个盒子的下、右内容边界是包含块的下方和右方。
⑵如果 direction 是 rtl(右到左),祖先产生的第一个盒子的上、右内容边界是包含块的上方和右方,祖先的最后一个盒子的下、左内容边界是包含块的下方和左方。
如果没有祖先,根元素盒子的内容边界确定为包含块。
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值