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 不一樣

  1. Height & Width
  1. Height: 預設的高度是內容的高度 block level 的element 高度
  2. Width: 預設的寬度要看種類
  1. block level  預設 100%
  2. inline level  會橫向展開到最大的內容然後停止
    所以width property 跟 height property一樣,只能用在 block level 的element 上
  1. 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
  1. Chrome Margin:橘色 Padding: 綠色 Content:藍色
  1. Borders
  1. 順序 border-width, border-stytle, border-color
  2. Value 的種類
  1. relative values: em, 百分比
  2. abolute values: px, mm, cm, in, pt, pc
  1. 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 會折到下一行
  1. Clearing Floated Elements
  1. 當你設定一個element floated 他就打破了原先頁面結構的flow,其他elements 會wrap around 在浮動的區塊旁邊。
  2. 可以使用 clear:both 來整理document的 normal flow
  1. Positioning Elements
  1. 預設的 position 是 static
  2. relative 可以讓你使用 top right bottom left 等 offset properties
  3. absolute, fixed 也可使用,但會破壞原本的 normal flow of a document ,相對應屬性是 relative 的 parent
  1. Grid & Frameworks
  1. Grids 網格的概念
  2. Frameworks 使用特定的 framework 建立統一的標準