包含块
一个元素，它的框的尺寸和位置会相对于一个特定的矩形框边缘来计算而得到，这个特定的矩形框称之为该元素的 包含块。
（为）一个元素生成的框通常会充当其子框的包含块；当我们叫一个 框的包含块 时，其实表达的是 该框所处的包含块，而不是其自身产生的包含块。
每个框相对于其包含块（该框所处的包含块）都会被给予一个位置，不过该框并不局限在包含块内，有可能会溢出，通常这个时候你会借助 overflow 属性来进行处理。
除了说什么是包含块，这里顺带再介绍一下生成包含块的一些特殊场景：
由根元素生成的包含块叫做
初始包含块（initial containing block）。对于其它元素，如果元素的
position值是relative或者static，其包含块由最近的祖先块容器框的内容边界（如果想知道什么是内容边界，可以先看看CSS盒模型）形成。
TIP
举个例子，td, th 就算有父容器 tr，但它们的包含块却是由 table 生成，因为 table 是 块容器框 而 tr 不是
绝对定位元素的包含块由最近的定位（
position值非static）祖先生成，如果不存在这样的祖先，则采用初始包含块；固定定位元素（
position: fixed）的包含块一般情况下都由视口 ① 生成；
说了这几个特殊的情景，你会发现并不是所有的包含块都是由父元素所生成。
参考文档：https://blog.csdn.net/syleapn/article/details/79582190
块级元素和块元素
块级元素是那些视觉上会被格式化成块状的元素，通俗一点来说就是那些会换新行的元素。display 属性的：block, list-item, table, flex, grid 值都可以将一个元素设置成块级元素。
TIP
块元素是 display 属性值为 block 的元素，它应该是 块级元素 的一个子集，而不是等同的，一个 块元素 是一个 块级元素，但一个 块级元素 不一定是一个 块元素，所以不要混淆。
块级框，块容器框，块框
- 什么是块级框？
块级元素生成块级框，这些框会参与某些 BFC。每个块级元素都会生成一个主要的块级框来包含其子框和生成的内容，同时任何定位方式都会与这个主要的块级框有关。
某些块级元素还会在主要的块级框之外产生额外的框：例如 list-item 元素，它需要生成一个额外的框用于包含 list-style-type。这些额外的框会相对于主要的块级框来进行排版。
- 什么是块容器框？
一个 块容器框 要么只包含 块级框，要么创建一个 IFC 而只包含 行内级框，但不能同时包含 块级框 和 行内级框。
除了 table框 和 置换元素，一个 块级框 同时也是一个 块容器框。非置换的行内块 和 单元格 是 块容器 但不是 块级框。
并不是所有的 块级框 都是 块容器框，也并不是所有的 块容器框 都是 块级框。
块级框 和 块容器框 的另外一个重要的区别是：块级框 需要能够包含其生成的内容，但 块容器框 并不需要。这是什么意思呢？简单的解释一下：
TIP
比如一个 iframe 其内容由 src 属性所决定，这可以当成是生成的内容，所以 iframe是一个 块级框 但却不是 块容器框
- 什么是块框？
简要的来说，是 块容器 的 块级框 称之为 块框。
可以通过下面这个图来快速的梳理清楚这3者之间的联系：
可置换元素
TIP
行内元素不可以设置宽高 img属于行内元素 但img却能是设置宽高的原因是他是一个置换元素（又叫置换元素）
html元素分为置换元素（又叫替换元素）与非置换元素（又叫非替换元素），置换与非置换元素有稍许的区别。
置换元素与非置换元素不仅是行内元素中有，块状元素也有置换元素与非置换元素之分->比如：嵌入的文档（iframe之类），还有audio和canvas在某些特定情形下也为置换元素
使用CSS的content属性插入的对象是匿名替换元素。