建議直接閱讀官方文檔：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/All_About_The_Containing_Block
以下為自己的簡單整理：
一個(gè)元素的尺寸和位置經(jīng)常受其包含塊的影響烂瘫。
大多數(shù)情況下耕渴，包含塊就是這個(gè)元素最近的祖先塊元素的內(nèi)容區(qū)，但也不是總是這樣替蔬。比如一些 position 為 absolute 或其他值的元素菲宴。
一栗精、包含塊的影響
元素的尺寸及位置期升，常常會(huì)受它的包含塊所影響取逾。對于一些屬性，例如?width,?height,?padding,?margin箕母，絕對定位元素的偏移值 （比如?position?被設(shè)置為absolute?或?fixed）储藐，當(dāng)我們對其賦予百分比值時(shí)俱济，這些值的計(jì)算值嘶是，就是通過元素的包含塊計(jì)算得來。
二蛛碌、根據(jù)包含塊計(jì)算百分值
要計(jì)算?height?top?及bottom?中的百分值聂喇，是通過包含塊的height?的值。如果包含塊的?height?值會(huì)根據(jù)它的內(nèi)容變化蔚携，而且包含塊的position屬性的值被賦予?relative?或?static?希太，那么，這些值的計(jì)算值為?0酝蜒。
要計(jì)算?width,?left,?right,?padding,?margin?這些屬性由包含塊的?width?屬性的值來計(jì)算它的百分值誊辉。
三、確定包含塊
如果 position 屬性為static或?relative?亡脑，包含塊就是由它的最近的祖先塊元素（比如說inline-block, block 或 list-item元素）或格式化上下文(比如說?a table container, flex container, grid container, or the block container itself)的內(nèi)容區(qū)的邊緣組成的堕澄。
如果 position 屬性為absolute?邀跃，包含塊就是由它的最近的 position 的值不是?static（也就是值為fixed,?absolute,?relative或sticky）的祖先元素的內(nèi)邊距區(qū)的邊緣組成。
如果 position 屬性是fixed蛙紫，在連續(xù)媒體的情況下(continuous media)包含塊是?viewport?,在分頁媒體(paged media)下的情況下包含塊是分頁區(qū)域(page area)拍屑。
如果 position 屬性是?absolute?或?fixed，包含塊也可能是由滿足以下條件的最近父級(jí)元素的內(nèi)邊距區(qū)的邊緣組成的：
