为了账号安全,请及时绑定邮箱和手机立即绑定

包含块模型

基本概念

包含块模型可以理解成一个矩形区域,这个矩形区域的作用是,为它里面包含的元素提供一个参考。一个元素大小和位置的计算,往往是由该元素所在的包含块决定的。
实际上,我们在工作中,都曾使用过包含块,比如,为一个元素设置百分比的宽度,那么这个宽度是相对于父元素进行计算的;或者,为一个元素设置绝对定位,我们很自然会想到为其父元素设置一个相对定位。

例子:

<style>
    div {
        width: 200px;
        background: #ccc;
    }
    
    p {
        width: 50%;
        background: #fd0;
    }
</style>

<div>
    <p>hello</p>
</div>

图片描述

确认元素的包含块

正确找出一个元素的包含块,需要依赖元素的 Position 属性,具体可以分为以下 4 种情况:

1.根元素( html 元素 )的包含块被称为初始包含块,由浏览器自行生成,通常它的大小就是网页的可视区域。

2.如果元素的 Position 属性值为" static( 默认值,表示标准文档流 ) “或者” relative ",那么它的包含块就是最近的、块级或内联块级祖先元素的内容区域( Content )。

例子:

<style>
    div {
        width: 200px;
        height: 40px;
        padding: 5px;
        background: #ccc;
    }
    
    span {
        display: inline-block;
        width: 50%;
        height: 50%;
        background: #fd0;
        position: relative;
        left: 0;
        top: 0;
    }
</style>

<div>
    <span>hello</span>
</div>

图片描述

例子中,我们可以看到,span 元素的宽高和位置( 0,0 ),都是根据块级元素 div 的内容区域进行计算的。

3.如果元素的 Position 属性值为" fixed ",那么该元素的包含块就是初始包含块。

例子:

<style>
    span {
        width: 50%;
        height: 50%;
        background: #fd0;
        position: fixed;
        left: 0;
        top: 0;
    }
</style>

<span>hello</span>

图片描述

例子中,我们可以看到,span 元素的宽高和位置( 0,0 ),都是根据初始包含块进行计算的。

4.如果元素的 Position 属性值为" absolute “,那么它的包含块由最近的、含有属性值” absolute “、” relative “或者” fixed "的祖先元素决定,具体规则如下:

①如果其祖先元素是内联元素,那么该元素的包含块是其祖先元素包含的第一个和最后一个" 内联盒子 "的内边距区域( Padding+Content )。

例子:

<style>
    label {
        position: relative;
        padding: 5px;
        color: #ddd;
    }
    
    b {
        width: 50%;
        height: 50%;
        background: #E91E63;
        font-size: 12px;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<label>
    AAA<b>BBB</b><i>CCC</i>
</label>

图片描述

例子中,我们可以看到,b 元素的宽高和位置( 0,0 ),都是根据第一个( 文字也会生成内联盒子 )和最后一个( i 元素 )" 内联盒子 "组成的包含块进行计算的。

*如果内联盒子出现换行的情况,按照定义,依然会根据第一个和最后一个" 内联盒子 "组成的包含块进行计算。

例子:

<style>
    label {
        position: relative;
        padding: 1px;
        color: #ddd;
    }
    
    b {
        width: 50%;
        height: 50%;
        background: #E91E63;
        font-size: 12px;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<label>
    AAAA<br><b>B</b><i>CC</i>
</label>

图片描述

②如果其祖先元素是块级元素,那么该元素的包含块则是其祖先元素的内边距区域(Padding+Content)。

例子:

<style>
    div {
        width: 200px;
        height: 100px;
        position: relative;
        padding: 5px;
        background: #ccc;
    }
    
    span {
        width: 50%;
        height: 50%;
        background: #E91E63;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<div>
    <span>hello</span>
</div>

图片描述

例子中,我们可以看到,span 元素的宽高和位置( 0,0 ),都是根据块级元素 div 的内边距+内容区域进行计算的。

③如果不存在已定位的祖先元素,则其包含块为初始包含块。

例子:

<style>
    span {
        width: 50%;
        height: 50%;
        background: #E91E63;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<div>
    <span>hello</span>
</div>

图片描述

例子中,我们可以看到,span 元素的宽高和位置( 0,0 ),都是根据初始包含块进行计算的。


如有错误,欢迎指正,本人不胜感激。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1.4万
获赞与收藏
860

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消