CSS Podcast - 001:Box 模型
假設您有以下這段 HTML:
<p>I am a paragraph of text that has a few words in it.</p>
然後為該 CSS 編寫這個 CSS:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
內容最終寬度為 142 像素,而非您指定的 100 像素, 分隔元素為什麼會這樣?
盒子模型是 CSS 的核心基礎。瞭解箱型模型 運作方式、CSS 其他方面對這個問題的影響 並利用這些控管方式 就能編寫更容易預測的 CSS
請務必記得,CSS 顯示的所有內容都是一個方塊,
只有部分文字,或以 border-radius
看起來像圓形。
內容和大小
Box 會根據本身的 display
值 (即與其組別) 設定不同行為
維度和包含的內容此內容可以是純文字,或
子項元素產生的方塊。無論如何,內容都會影響
方塊的預設狀態
如要控管這項設定,您可以採用極端規模,也可以使用內建大小調整功能。 讓瀏覽器根據內容大小 做決定
以下是說明其中差異的基本示範:
示範中提到「CSS 真棒」一個固定尺寸及一個方塊
粗框線由於方塊設有指定寬度,因此尺寸會超出限制。
這表示該控制項可控管子項內容的大小。不過,
「太棒了」太大,超出方塊的尺寸,因此溢位
邊框 (稍後會詳細說明)。避免這種溢位現象的方法之一
方塊的大小取決於內部的高度,或者在本例中
將 width
設為 min-content
。min-content
關鍵字會指示系統
寬度至少等同於包含內容的最小寬度 (「
「太棒了」)。讓方塊與文字的四周完全貼合。
以下這個更複雜的範例顯示不同尺寸的真實大小 內容:
開啟及關閉內建函式調整大小功能,查看外界大小如何帶來更大效果 並提供極端規模和內建函式調整功能 控管功能如要查看特效,請在資訊卡中新增幾句話。 這個元素的大小調整後,內容數量會受到限制 可能會在溢位之前 這是目前啟用狀態
根據預設,這項元素各有一組 width
和 height
設為 400px
。
這些維度會為元素內的所有內容設定嚴格的邊界,
除非內容太大,不超出方塊大小。您可以實際查看
將花朵圖片下的說明文字
變更為超過
方塊的高度
重要字詞:如果內容太大,無法放入箱中,就會發生溢位現象。你可以
使用 overflow
屬性管理元素處理溢位內容的方式。
切換為內建大小調整功能,可讓瀏覽器根據 方塊的內容大小這大幅降低溢位現象 隨內容調整大小
請注意,內建大小調整功能是瀏覽器的預設值 而且通常比外在調整大小更具彈性。
盒子模型的領域
箱子是由不同的盒子模型區域組成,這些區域都是執行特定工作。
內容方塊是指內容所在的區域,這類內容可以 控制父項大小,因此這個區域通常大小最大。
邊框間距方塊會圍繞內容方塊,也就是由
padding
屬性。
由於邊框間距位於方塊內,因此方塊背景可以顯示在空間中
新建的 Pod
如果方塊設有溢位規則,例如 overflow: auto
或
overflow: scroll
,捲軸也會佔用這個空間。
框線圍繞著邊框間距方塊,且空間是由
border
值,
會為元素建立視覺頁框元素的框線是
你的檢視權限會受到限制
最後一個區域則是邊界方塊,也就是方塊的周圍空間 (由
方塊的 margin
規則。屬性包括
outline
和
box-shadow
。
也佔用空間,因為這類圖像是繪製在元素上,而且不會
方塊的大小正在變更方塊的 outline-width
(共 200px
個)
方塊內不會有任何變化。
實用的類比
箱型模型相當複雜,所以我們用一個比喻 。
如上圖所示 牆壁。取框圖片的元素會對應至方框模型,如下所示:
- 內容方塊則是圖片。
- 邊框間距框是邊框和圖片之間的白色安裝板,
- 邊框方塊就是邊框,提供圖片常值的邊框。
- 邊界方塊是指頁框之間的間距。
- 陰影會佔用與邊界框相同的空間。
對箱模型進行偵錯
瀏覽器開發人員工具會以視覺化的方式呈現所選方框模型 因此能協助你瞭解發盒模型的運作原理和運作方式 會影響您目前瀏覽的網站
在瀏覽器中試試看:
,瞭解如何調查及移除這項存取權。控制箱型模型
如果想瞭解如何控制 Box 模型,就必須先瞭解 。
每個瀏覽器都會將使用者代理程式樣式表套用至定義 元素在未定義 CSS 的情況下,應呈現的外觀和行為。這個 CSS 供應商 使用者代理程式樣式表因瀏覽器而異,但很實用 以方便閱讀
使用者代理程式樣式表的一項屬性會設定方塊的預設 display
。適用對象
例如,在一般流程中,<div>
元素的預設 display
值為
block
,<li>
預設的 display
值為 list-item
,<span>
display
的預設值是 inline
。
inline
元素具有區塊邊界,但其他元素則沒有對齊。
使用 inline-block
時,其他元素會沿用區塊邊界,但第一個元素會沿用第一個元素
元素會保留與 inline
元素所具有的大部分行為。
根據預設,block
項目會填滿可用的內嵌空間,
inline
和 inline-block
元素的大小只和其內容一樣大。
使用者代理程式樣式表也會設定 box-sizing
,以便告知方塊如何
計算的箱大小根據預設,所有元素都具有下列使用者代理程式
樣式:box-sizing: content-box;
。也就是說,設定這類維度時
如同 width
和 height
,這些維度會套用至內容方塊。如果發生以下情況:
然後設定 padding
和 border
,系統會將這些值加入內容方塊的
大小
隨堂測驗
測驗您對箱型模型大小影響屬性的瞭解程度。
.my-box { width: 200px; border: 10px solid; padding: 20px; }
你認為「.my-box
」的面積有多大?
這個方塊的實際寬度為 260 像素。
由於 CSS 使用預設的 box-sizing: content-box
,因此套用的寬度會是
且兩邊的 padding
和 border
都會新增至
這些資料。內容為 200px + 邊框間距 40px + 邊框間距 20 像素可構成一個
顯示寬度為 260 像素
如要變更此設定,請指定 border-box
大小:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
這個替代方塊模型會指示 CSS 將 width
套用至邊框方塊
而非內容方塊換句話說,我們的 border
和 padding
會獲得
已推送,因此如果將 .my-box
的寬度設為 200px
,那麼實際上會顯示
目前電量為 200px
如要瞭解運作方式,請觀看以下互動式示範。切換
box-sizing
值時,藍色區域會顯示「內部」套用的 CSS
方塊。
*,
*::before,
*::after {
box-sizing: border-box;
}
這項 CSS 規則會選取文件中的所有元素
以及每個 ::before
和 ::after
虛擬元素並套用 box-sizing: border-box
。
這表示每個元素現在都會使用這個替代 Box 模型。
由於替代箱模型比較容易預測,開發人員通常會 就像這項規則一樣,重設此規則及正規化工具。