乙個元素的尺寸和位置經常受其包含塊(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。參考mdn鏈結要計算 width, left, right, padding, margin 這些屬性由包含塊的 width 屬性的值來計算它的百分值。
對於實訓專案的確定與功能討論
第一周,首先要確定實訓要做的專案。我們都沒有完整的專案開發經歷,也沒有做很多的專案開發,所以我們首先就要確定的是實訓要做什麼。大家都集思廣益,貢獻了很多電子,最後綜合時間以及工作量,我們經過討論決定做乙個問卷調查的系統。我們了解,做乙個專案絕對不是上來就寫 的,需要乙個規劃,需求,功能,等,按照之前...
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...