Box Model
In CSS, the term "box model" is used when talking about design and layout.
所有HTML元素都可以被視爲是“盒子”。當談論設計和佈局時會使用到“盒模型”這個術語。
The CSS box model consists of: margins, borders, padding, and the actual content.
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area.
注意，通過CSS設定元素的寬和高，只是設定了內容區域的寬、高。
To calculate the full size of an element, you must also add the padding, borders and margins.
計算一個元素的完整尺寸，必須把內邊距，邊框寬度和外邊距加上。
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
Internet Explorer 8 and earlier versions, include padding and border in the width property. To fix this problem, add a <!DOCTYPE html> to the HTML page.
Outlines
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
CSS輪廓是圍繞着元素而畫的線（在元素邊框之外），使得元素突出顯示。
The outline is not a part of an element‘s dimensions; the element's total width and height is not affected by the width of the outline.
輪廓不是元素面積的一部分，所以元素完整的寬和高不受輪廓的寬、高所影響。
使用性質 outline 來一次設定輪廓的樣式。須遵循的順序是:
- outline-color
- outline-style
- outline-width
If one of the values above are missing, e.g. "outline:solid #ff0000;", the default value for the missing property will be inserted, if any.
默認值是：
outline: invert none medium;invert: performs a color inversion. This ensures that the outline is visible, regardless of color background
- Outline Color 使用 outline-color 性質時，必須聲明 outline-style 性質，取值同其他元素顏色。
- Outline Style 取值同border裏的相關性質。
- Outline Width 使用 outline-width 性質時，必須聲明 outline-style 性質，取值同border裏的相關性質
Dimension
CSS尺寸是用於控制一個元素 content 區域的寬和度。
Height & Width
可取的值：
- auto: 此爲默認值，瀏覽器來計算
- length : in px, cm, etc
- % : in percent of the containing block 以內容模塊的百分比顯示
Min-height、Max-height、Min-width、Max-width
min-*取值：
- length 默認值爲 0，in px, cm, etc.
- %
max-*取值：
- none 此爲默認值
- length: in px, cm, etc.
- %: in percent of the containing block
Note:The max-height properties override 重寫 height.
The value of the min-height property overrides both max-height and height
Note: The max-width properties override 重寫 width.
The value of the min-width property overrides both max-width and width
Tips: 對於 <p> 元素設置 max-height 並不會影響文字排版，而設置 max-width 時，超出最大寬度的文字將被自動換行。
但是如果給它上背景色，設定的max-height可以看出確實改變了塊元素的高度。
參考w3school上面max-height和max-width的例子。