CSS 入門筆記(一) Box Model & Box-sizing
在Alpha Camp大航道計畫中『建立靜態網站』這個章節中，介紹了HTML 及 CSS這兩樣工具，除了教材外我也在學習過程中邊看邊查資料並彙整了一些額外的學習資源，而本文則是整理了網頁構築的基本結構Box Model的特性及用於改變元素寬高的Box-sizing特性。
Block盒子特性
1. Block盒子佔滿頁面一整個橫列，也就是說block盒子寬度與瀏覽器頁面相同。
2. Block盒子之後的元素會從新的一行開始
3. Block 盒子的高度預設和內容一樣，如果你把視窗拉小，由於
<h1>的內容被擠到下一行，盒子的高度也隨之調整。4. Block 盒子的高度和寬度都可以用 CSS 控制。
Inline盒子特性
1. Inline盒子尺寸取決於內容，不可隨意改變。
2. Inline盒子緊鄰前一個元素，不會從換行從新的一行開始。
常見的box元素
- 常見的Block元素：<h*>, <p>, <div>
- 常見的Inline元素：<span>, <em>, <strong>, <img>, <a>
二. Box 屬性
內容content: 即上圖中auto x auto，被HTML標籤包圍的內容。
內縮padding: 內容到Border之間的綠色區塊。
邊框Border: Padding與Margin之間的線條，即土黃色區塊。
外擴Margin: Border以外的空間，即橘色區塊。
每個box均由這四個區塊組成, 由個別的edge去定義（the content area, padding area, border area and margin area）
Reference:Introduction to the CSS box model
Padding area即content到border之間的厚度或距離，可以以padding-top, padding-right, padding-bottom 及 padding left或速寫法 padding去定義屬性。
1. 當box-sizing屬性為content-box時，border的厚度或寬度由border-width或速寫border定義。
2. 當box-sizing屬性為border-box時，border area的size由width, height, min-width, max-width, min-height 和max-height定義屬性。
Margin area為border edge延展到margin edge的區塊，經常使用於將相鄰元素分離。
Margin的size則由margin-top, margin-right, margin-bottom和margin-left及速寫margin去定義屬性。
寬度計算：
box width = content width + padding width + border width
Margin Collapse
兩相臨的block margin-top及margin-bottom有時候會合併再一起，即稱重疊margin collpase。
同一層的相鄰，margin-top and margin-bottom均為正值，則取最大值作為合併後的範圍。例如，margin-top: 87px; vs margin-bottom: 13px;，最終挑選最大的範圍87px作為範圍值。反之均為負數時，擇取最小值（及絕對值最大的值）。當計算的時候某些邊界範圍是負數，邊界重疊的結果會取最大值和最小值相加。也就是說如果有 -13px, 8px, 100px 疊在一起，邊界範圍的計算就是 100px — 13px 的 87px。
Reference: Mastering Margin Collapse
Reference: 理解邊界重疊的原因
Box-sizing
Box-sizing屬性是用來改變default CSS box model（用於計算元素width amd height）。CSS default box-sizing 是 content-box。
Keyword values:
box-sizing: content-box;
box-sizing: border-box;
Box-sizing屬性使用及特性：
1. Content-box: 該特性為CSS box-sizing的default屬性。假如將元素width設為100pixel，該元素的content box就會呈現100 pixel wide，至於其餘的寬度屬性如padding or border的width屬性最後則將會額外被賦予上去，也就是不包含在這100 pixel中。
2. Border-box: 明確告訴瀏覽器border-box的屬性均包含了border及padding所定義的width值及height值。假如將元素width設為100pixel，該元素的border box所呈現的100 pixel wide範圍中就包含了已定義的border or padding width值。
3. Content box跟border box的差異就在於content box除了content width外的所有width均不會被納入content box中。
Reference: Box-sizing
