[toc] ## 什么是包含塊 包含塊，`containing block` 它是元素用來`計算`和`定位`的一個框 ## 包含塊的選擇 ### 初始包含快 每個元素至少有被一個包含塊所包裹，這個包含塊就是視口元素 ### position為relative和static position為relative和static時的包含塊為最近的祖先盒是**塊級**容器的元素， 也就是說一個元素若被一個span包裹，這個span并不是它的包含塊，不會按照這個span來計算，其根本原因大概在于行級元素是內部(決定)尺寸，So它不能作為一個判斷的根基  ### position:fixed position:fixed元素的包含塊為初始包含塊，即視口 ### position:absolute position:absolute的元素的包含塊由最近的position不為static的祖先元素建立。 通常情況下這個包含塊由該**祖先的`padding box`邊界**形成。（非定位的包含塊為`content box`） #### 定位且為inline 上面說的是通常情況下，但是在絕對定位下，包含塊也可以是一個inline元素。 那么此時，這個包含塊是怎樣的呢？ 在**不換行**的情況下，在這一行的首尾為各生成一個寬度為0的內聯盒子（虛擬的），包裹住這兩個內聯盒子的padding box的外面的包圍盒即為當前包含塊 但是如果**換行**，此時屬于未定義行為，由各瀏覽器廠商自主解析。 ## 包含塊為inline（子元素絕對定位，才允許是inline）時的注意事項 當前包含塊會受`::first-line`偽元素影響，但不受`::first-letter`偽元素影響 不受`line-height`等屬性影響（由前后"生成的"內斂盒子的em-box決定）