包含塊的確定與作用

2021-10-08 13:31:30 字數 1316 閱讀 1914

乙個元素的尺寸和位置經常受其包含塊(containing block)的影響。大多數情況下,包含塊就是這個元素最近的祖先塊元素的內容區,但也不是總是這樣。

當乙個客戶端**(比如說瀏覽器)展示乙個文件的時候,對於每乙個元素,它都產生了乙個盒子。每乙個盒子都被劃分為四個區域:

內容區內邊距區

邊框區外邊距區

許多開發者認為乙個元素的包含塊就是他的父元素的內容區。但事實並非如此。接下來讓我們來看看,確定元素包含塊的因素都有哪些。

根元素的包含塊:

根元素的包含塊也成為初始包含塊,在html中根元素就是html標籤,個別瀏覽器也可能是body。在大多數瀏覽器中初始包含塊的大小就是乙個視窗大小的矩形

浮動元素:
包含塊為最近的塊級祖先元素

對於乙個非根元素,如果其position值是relative或者是static
包含塊由最近的塊級框,表單元格或行內塊祖先框的內容邊界構成

對於乙個非根元素,如果其position為fixed
包含塊為視口大小的矩形

對於乙個非根元素,如果其position為absolute
包含塊是最近開啟定位的祖先元素的

a、如果包含塊是塊級元素 包含塊大小是內邊距以內區域

b、如果包含塊是內斂元素

c、如果沒有祖先元素,包含塊則為初始包含塊

元素的尺寸及位置,常常會受它的包含塊所影響。對於一些屬性,例如 width, height, padding, margin,絕對定位元素的偏移值 (比如 position 被設定為 absolute 或 fixed),當我們對其賦予百分比值時,這些值的計算值,就是通過元素的包含塊計算得來。

要計算 height top 及 bottom 中的百分值,是通過包含塊的 height 的值。如果包含塊的 height 值會根據它的內容變化,而且包含塊的 position 屬性的值被賦予 relative 或 static ,那麼,這些值的計算值為 auto。

要計算 width, left, right, padding, margin 這些屬性由包含塊的 width 屬性的值來計算它的百分值。

參考mdn鏈結

對於實訓專案的確定與功能討論

第一周,首先要確定實訓要做的專案。我們都沒有完整的專案開發經歷,也沒有做很多的專案開發,所以我們首先就要確定的是實訓要做什麼。大家都集思廣益,貢獻了很多電子,最後綜合時間以及工作量,我們經過討論決定做乙個問卷調查的系統。我們了解,做乙個專案絕對不是上來就寫 的,需要乙個規劃,需求,功能,等,按照之前...

C陷阱篇之復合表示式中的確定與不確定

運算元求值順序不定 c只規定小部分運算子以已知 特定順序對其運算元求值,其他運算子的求值順序沒有定義,有偶然性。如a b c d,c標準規定 先求a,如a成立,再求c並計算整個表示式的值。任何編譯器都不會先算c再算a,即 運算子的求值順序在c標準中有明確規定,先左後右。但下到a粒度時,c編譯器對a和...

塊級作用域與函式作用域

函式作用域 變數在定義的環境中以及巢狀的子函式中處處可見 塊級作用域 變數在離開定義的塊級 後立即被 在es6之前,js的作用域只有兩種 函式作用域和全域性作用域。使用var宣告的變數,都存在變數提公升的過程。console.log a undefined console.log c undefin...