关于包含块(containing block)的理解

概念:

元素的尺寸和位置的计算往往是由该元素所在的包含块决定的,包含块就是为它里面包含的元素定位提供一个初始位置,它是一片长方形的区域。一般元素用到position定位时,因需要确定定位的初始位置,就需要清楚什么是包含块。(为便与理解,个人做了简单的描述,不一定是标准解释)。

包含块:

1、在HTML中,html元素就是一个包含块(即初始包含块)。

2、如果元素的定位(position)为:relative或static(默认静态定位)。

它的包含块就是由它最近的块级(或含块属性)祖先元素创建。

3、如果元素的定位(position)为:fixed,它的包含块由窗口创建,

定位起始位置为窗口左上角

4、如果元素的定位(position)为:absolute,它的包含块由最近的position为:

relative、absolute、fixed的祖先元素创建。

其中的祖先元素尽量是块级元素,行内元素会产生一些兼容问题。

更具体可参考包含块文档:点击打开链接





  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值