css-包含块

在CSS中，有事一个元素的位置和尺寸的计算都相对于一个矩形，这个矩形被称作包含块。包含块是一个相对的概念，比如
子元素的初始化布局总是在父元素的左上角，这就是一个相对的概念。其中父元素就是一个参照物，但实际上这些元素都是根据
包含块所在的位置进行布局，每个元素都会生成一个包含块，但这个包含块是虚无的，你看不到也摸不着，只是一个概念。

包含块的最主要的作用就是给它里面的元素一个位置上的参照也就是它应该从哪里开始摆放。包含块并不会限制它里面元素的大小
如果里面的元素比包含块大，那么超出的部分就会被溢出。
一个元素的位置和尺寸与它的包含块息息相关，而元素会为它的子孙元素创建包含块，但这并不代表这个包含块就是它的父元素，
再次强调包含块只是一个概念。包含块最终的样子是由元素自身和它的祖先元素的样式等决定的。
包含块的创建：
1.在HTML中，根元素的包含块叫作初始包含块，具体创建由客户端决定
2.当定位值为fixed，则包含块由视口创建
3.当定位值为relative、static或没有设置定位属性，则包含块由最近的父元素或祖先元素创建
4.当定位值为absolute，则包含块由最近的定位值relative、absolute、fixed创建，如果没有定位的祖先元素，则包含块为初始包含块（具体由客户端来决定）
5.当祖先元素是行内元素时，那么包含块取决于父元素或祖先元素的direction属性