css包含块

包含块

mdn文档

包含块的影响:

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

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

标准文档流中的包含块

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

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

示例代码:

 
 ​
 
     
         
     
 

运行结果:

css包含块_第1张图片

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

定位中的包含块

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

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

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

示例代码:



执行结果:

css包含块_第2张图片

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

总结

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

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

你可能感兴趣的:(css,前端,html)