CSS盒模型

景軒CUTE發表於2020-12-27

CSS盒模型

盒模型

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

CSS盒模型

  • 內容區域(content-area)

    • 元素真實內容的區域,位於內容邊界的內部。它的大小為元素內容的寬度(或content-box的寬)和元素內容的高度(或content-box的高)。
    • box-sizing是預設值時,width, min-width, max-width, height, min-heightmax-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;
    CSS盒模型

IE盒模型(border-box)

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

相關文章