以下哪些说法是正确的？
- 元素的width百分比相对的是父元素的宽度？
- 元素的height百分比相对的是父元素的高度？
- 元素的margin百分比相对的是父元素的宽度？
- 元素的padding百分比相对的是父元素的宽度？
- 元素的left相对的是offsetParent（元素第一个定位祖先）的左边缘？
- 元素top相对的是offsetParent的上边缘？
以上说法看似全部正确，实则全部错误。但是只需要改一个词以上说法就全部正确
- 元素的width百分比相对的是包含块的宽度？
- 元素的height百分比相对的是包含块的高度？
- 元素的margin百分比相对的是包含块的宽度？
- 元素的padding百分比相对的是包含块的宽度？
- 元素的left相对的是包含块的左边缘？
- 元素top相对的是包含块上边缘？
为何父元素改成包含块就正确了呢？
包含快 !== 父元素
包含块是什么？
日常开发中写的代码并不会直接作用于页面的，是需要浏览器渲染解析（浏览器渲染原理参考文章：juejin.cn/post/731950… ） 在浏览器解析中有一步是样式计算，计算之后就是布局，布局所依靠是视觉格式化模型规则，参考文章（juejin.cn/post/732153…
视觉格式化模型分为
- 文档流
- 定位流
- 浮动流
而包含块就是视觉格式化模型中的基本概念。
包含块：元素在哪个区域中排列
元素A在元素B中排列，元素B就是元素A的包含块，元素A的margin、width、height、padding都是相对包含块B的位置。
包含块的确定
常见确定规则
首先元素会有四个盒子，margin边距盒，padding填充盒，border盒，content内容盒。
- 所有的浮动元素和常规元素它们的包含块是父元素的内容区域，父元素内容盒。
- 定位元素和包含块在第一个定位祖先的padding区域，padding填充盒。
- 固定定位的包含块并不一定是浏览器窗口，需要看它最近的元素有没有变形元素（改动了transform的元素）。如果没有变形元素，包含块就是浏览器的可视窗口，如果有包含块就是该元素的padding填充盒。
父元素 !== 包含块
