css包含块

包含块

mdn文档

包含块的影响:

一个元素元素的宽高内外边距位置等等常常会受到包含块的影响 .

可以说元素的尺寸和位置经常会参考它的包含块 .

标准文档流中的包含块

标准文档流: 元素默认的排列方式 , 不使用任何布局方式 . 不使用任何产生 块级格式化上下文(bfc) 的属性 .

在标准流中 , 一个元素的包含块通常是它的父元素 .

示例代码:

 <style>
 .grandfather {
     width: 500px;
     height: 500px;
     background-color: #f40;
 }
     
 .father {
     width: 300px;
     height: 300px;
     background-color: lightblue;
 }
 ​
 .child {
     width: 50%;
     height: 50%;
     background-color: violet;
 }
 </style>
 ​
 <div class="grandfather">
     <div class="father">
         <div class="child"></div>
     </div>
 </div>

运行结果:

可以看到在标准流中 child 的百分比宽高是参考它的父元素的 . 父元素就是child的包含块 .

定位中的包含块

绝对定位 absolute 定位元素的包含块是距离当前定位元素中最近的一个祖先定位元素 .

如果所有祖先元素都没有设置定位 , 那么将参考 初始包含块 (html) .

这里不谈及其他定位的知识 .

示例代码:

<style>
.grandfather {
    width: 500px;
    height: 500px;
    background-color: #f40;
}
    
.father {
    width: 300px;
    height: 300px;
    background-color: lightblue;
}

.child {
    width: 50%;
    height: 50%;
    background-color: violet;
}
</style>

<div class="grandfather">
    <div class="father">
        <div class="child"></div>
    </div>
</div>

执行结果:

可以看到定位后 child 的宽高参考的是 grandfather , grandfather就是child的包含块 .

总结

以上两个简单的示例你应该初步了解了什么是包含块 , 详细的细节可以参考 mdn文档 .

包含块是css中一块很重要的知识 , 后面的很多知识点都会与包含块挂钩 .