http://learn.shayhowe.com/html-css/box-model

LESSON 3 Box Model & Positioning

Every element on a page is a rectangular box

1. Box Sizing
2. The Box Model

1. Width: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px
   margin-right + border-right + padding-right + width + padding-left + border-left + margin-left
2. Height: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px
   margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
3. IE6 Box Model 不一樣
   

3. Height & Width

1. Height: 預設的高度是內容的高度 block level 的element 高度
2. Width: 預設的寬度要看種類

1. block level  預設 100%
2. inline level  會橫向展開到最大的內容然後停止
   所以width property 跟 height property一樣，只能用在 block level 的element 上

4. Maring & Padding
   所有的瀏覽器都支援上述兩個 property，但是支援的程度不同

1. Margin: 外圍 border 外
2. Padding: 內縮 border 內，會繼承 backgrounds
3. Margin & Padding Declarations

1. 支援 long 跟 short hand 兩種寫法
2. margin: 20px; 上下左右
3. margin: 10px 20px: 上下 左右
4. margin: 10px 20px 10px; 上 左右 下
5. margin: 10px 20px 0 15px; 上 右 下 左
6. margin-top , padding-left

4. Chrome Margin:橘色 Padding: 綠色 Content:藍色

5. Borders

1. 順序 border-width, border-stytle, border-color
2. Value 的種類

1. relative values: em, 百分比
2. abolute values: px, mm, cm, in, pt, pc

6. Floating Elements

1. Rules:

1. A floated box is positioned within the normal flow
2. When you float an element it becomes a block box
3. You should always set a width on floated items
4. 如果水平空間不夠，float element 會折到下一行

2. Clearing Floated Elements

1. 當你設定一個element floated 他就打破了原先頁面結構的flow，其他elements 會wrap around 在浮動的區塊旁邊。
2. 可以使用 clear:both 來整理document的 normal flow

7. Positioning Elements

1. 預設的 position 是 static
2. relative 可以讓你使用 top right bottom left 等 offset properties
3. absolute, fixed 也可使用，但會破壞原本的 normal flow of a document ，相對應屬性是 relative 的 parent

8. Grid & Frameworks

1. Grids 網格的概念
2. Frameworks 使用特定的 framework 建立統一的標準