指出错误观念
许多开发者认为一个元素的包含块就是他的父元素的内容区，其实这是错误的（至少不完全正确）！
一个元素的尺寸和位置经常受其包含块的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。
下面我们看看盒模型：
当浏览器展示一个文档的时候，对于每一个元素，它都产生了一个盒子。每一个盒子都被划分为四个区域：
内容区
内边距区
边框区
外边距区
什么是包含块？
包含块有分为根元素包含块和其他元素的包含块。
根元素包含块
根元素html的包含块是一个矩形,叫做初始化包含块(initial containing block)。
可以看到html外面还有空间，这个包含html的块就被称为初始包含块(initial containing block)，它是作为元素绝对定位和固定定位的参照物。
对于连续媒体设备（continuous media），初始包含块的大小等于视口viewpor的大小，基点在画布的原点（视口左上角）；对于分页媒体（paged media），初始包含块是页面区域（page area）。初始包含块的direction属性与根元素的相同。
其他元素的包含块
大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样，下面就来学习如何确定这些元素的包含块。
元素包含块的作用？
元素的尺寸和位置经常受其包含块的影响。
对于一个绝对定位的元素来说（他的 position 属性被设定为 absolute 或 fixed），如果它的 width, height, padding, margin, 和 offset 这些属性的值是一个比例值（如百分比等）的话，那这些值的计算值就是由它的包含块计算而来的。
简单来说，如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性：
1. height, top, bottom 这些属性由包含块的 height 属性的值来计算它的百分值。如果包含块的 height 值依赖于它的内容，且包含块的 position 属性的值被赋予 relative 或 static的话，这些值的计算值为0。
2. width, left, right, padding, margin, text-indent 这些属性由包含块的 width 属性的值来计算它的百分值。
如何确定元素的包含块？
确定包含块的过程完全依赖于这个包含块的 position 属性，大致分为下列场景：
- 如果 position 属性是 static 或 relative 的话，包含块就是由它的最近的祖先块元素（比如说inline-block, block 或 list-item元素）或格式化上下文BFC的**内容区的边缘（不包padding）**组成的。
section {
/* display: block; */
/*display: flex;*/
float: left; /* 产生BFC*/
width: 400px;
height: 200px;
background: lightgray;
padding: 20px;
margin: 50px;
}
p {
/* 这里比例计算不包括包含快padding, 只参考实际内容宽高 */
width: 50%; /* 宽度200px: 400*0.5= 200 */
height: 50%; /* 高度100px: 200*0.5= 100 */
margin: 1%; /* margin:4px: 400*0.01= 4 */
padding: 1%; /* padding:4px: 400*0.01= 4 */
background: cyan;
}
/* 在这里，这个P标签position为默认的static，所以它的包含块为Section标签。 */
html结构
<body>
<section>
<p>this is paragraph</p>
</section>
</body>
- 如果 position 属性是 absolute 的话，包含块就是由它的最近的 position 的值不是 static （fixed, absolute, relative, or sticky）的祖先元素的**内边距区的边缘(包padding)**组成的。
section {
display: block;
width: 400px;
height: 200px;
background: lightgray;
/* position: relative; */
/* position: absolute; 定位不为static*/
position: fixed;
padding: 20px; /* 影响子元素计算 */
margin: 50px; /* 不影响子元素计算 */
}
p {
/* 这里比例计算是盒子整个宽高，包括padding不包margin（前提是不能 box-sizing设置为border-box） */
width: 50%; /* 宽度220px: （400+40）*0.5= 220 */
height: 50%; /* 宽度120px: （200+40）*0.5= 120 */
background: cyan;
left: 10%; /* 左右宽度决定： （400+40）*0.1= 44 */
top: 10%; /* 上下高度决定： （200+40）*0.1= 24 */
padding: 1%; /* padding:4.4px: (400+40)*0.01= 4.4 */
position: absolute;
}
/*包含块为Section标签。 */
- 如果 position 属性是 fixed 的话，包含块就是由 viewport (in the case of continuous media) or the page area (in the case of paged media) 组成的。
这个直接参考视口viewport宽高 （包含块为视口 ）
- 如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的**内边距区的边缘(包padding)**组成的：
1.transform不为none
2.A will-change value of transform or perspective
(翻译：ransform或perspective的will-change值)
3.A filter value other than none or a will-change value of filter (only works on Firefox).
(翻译：transform或perspective的will-change值除了none或filter的will-change值(只在Firefox上工作)。)
需要知道的是transform属性不为none.
section {
display: block;
width: 400px;
height: 200px;
background: lightgray;
margin: 50px;
padding: 20px;
/* transform: rotate(0); */
/* transform: translate(0); */
transform: scale(1);
}
/* 也是计算盒子整个宽度和高度，包括padding不包margin */
p {
width: 50%;
height: 50%;
margin: 1%;
padding: 1%;
background: cyan;
left: 10%;
top: 10%;
/* position: absolute; */
position: fixed;
}
/*包含块为Section标签。 */
其实和我们平时用的定位差不多，只不过子元素宽高那些设置百分比，元素定位等要参考祖先元素时候，需要确定好参考的包含快。
上面大部分参考来源： http://www.manongjc.com/detail/13-jvolnkunrsfcquo.html
下面图和总结来源：
作者：117df14b2449
链接：https://www.jianshu.com/p/e7e8fa8b6cdf
如果想要给一个元素做absolute定位，就要考虑他的包含块，这个元素的父级元素只有在将position属性设置为relative 、absolute、fixed的情况下才可以作为这个元素的包含块，如果没有设置position，其position属性实际上为默认的static，static定位的位置与relative相同，但不能让这个元素成为其子元素的包含块，子元素将向上寻找最近的一个设置了positon属性的包含元素作为其定位的包含块。