CSS盒模型

盒模型

根據CSS的規定，瀏覽器會按照盒模型去渲染所有的元素。每一個標準的盒模型都有一個長方形的內容區域(content-area)，緊接著是包圍在四周的內邊距區域(padding-area)，然後是邊框區域(border-area)，最後是外邊距區域(margin-area)。模型如下：

• 內容區域(content-area)

  • 元素真實內容的區域，位於內容邊界的內部。它的大小為元素內容的寬度(或content-box的寬)和元素內容的高度(或content-box的高)。
  • 若box-sizing是預設值時，width, min-width, max-width, height, min-height與 max-height 控制內容大小。

• 內邊距區域(padding-area)

  • 內容邊界和內邊距邊界之間的空間為內邊距區域。
  • 內邊距區域的大小可以由 padding-top, padding-right, padding-bottom, padding-left 和簡寫屬性 padding控制。
  • 當內容區域設定了背景、顏色或圖片時，內邊距區域也會同樣受到影響。

• 邊框區域(border-area)

  • 內邊距邊界和邊框邊界之間的空間為邊框區域。
  • 邊框區域的大小可以由border-width 及簡寫屬性 border控制。

• 外邊距區域(margin-area)

  • 邊框邊界和外邊距邊界之間的空間為外邊距區域。
  • 外邊距區域的大小可以由margin-top, margin-right, margin-bottom, margin-left及簡寫屬性 margin 控制。

W3C盒模型和IE盒模型

W3C盒模型(content-box)

• 規定：元素的width和height屬性 = 元素的內容區域(content)。
• 例如：設定width:200px;

  

IE盒模型(border-box)

• 規定：元素的width和height屬性 = 元素的內容區域(content) + 元素的內邊距區域(padding) + 元素的邊框區域(border)。
• 例如：設定width:200px;