iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 4
0
自我挑戰組

前端新手進化史系列 第 4

基礎 box model (上)

文章將陸續整理並更新至個人部落格


想像每個元素都是一個盒子,<html> 像是個超級大盒子,裡面裝著各式各樣的盒子,盒子又可以裝盒子,一個版面正是由許許多多的盒子所構成。box model 是切版中非常重要的觀念,來認識一下吧!

基礎 box model

box model 由內容區域 (content area)、內距 (padding)、邊框 (border)與外邊距 (margin)所組成。


內容區域 (content area)

內容區域,裡面可能是文字、圖片、影片或其它元素。

  • 在預設的情況下,即 box-sizing 屬性的值為 content-box 時,內容區的範圍取決於元素的 width 與 height 屬性,但 inline 元素裡的非替換元素(non-replaced elements,)除外,因其無法使用 width 與 height 來調整寬高。


內距 (padding)

介於內容區域 (content area)與邊框 (border)之間的範圍內。

  • 厚度取決於 padding 屬性:

    • padding
    • padding-top
    • padding-bottom
    • padding-left
    • padding-right
  • 不能為負值。

  • 預設情況下,內距不包含在屬性 width 屬性的範圍。


外距 (margin)

圍繞於邊框(border)之外,用於推開元素與其它元素之間的距離。

  • 厚度取決於 margin 屬性,可以是正值或負值,但若為負值,可能會與其它元素重疊。相關屬性如下:

    • margin ⇒ 四邊外距
    • margin-top ⇒ 上外距
    • margin-bottom ⇒ 下外距
    • margin-left ⇒ 左外距
    • margin-right ⇒ 右外距


邊框 ( border)

介於外距 (margin)與內距 (padding) 之間的範圍。

  • 可以使用 border 屬性來設置邊框的寬度、樣式與顏色。
    三合一縮寫語法 (三個值的順序可以互換,省略):

    border: border-width|border-style|border-color
    

    亦可單獨指定寬度、樣式。屬性如下:

    • border-width ⇒ 邊框寬度
    • border-style ⇒ 邊框樣式
    • border-color ⇒ 邊框顏色
  • 預設情況下,邊框並不包含在屬性 width 屬性的範圍內。



大致認識 box model 的長相後,下一篇將來看看 box model 的身材。




/images/emoticon/emoticon29.gif



參考資料

  1. MDN - Introduction to the CSS basic box model
  2. MDN - The box model

上一篇
大 角頭 block
下一篇
基礎 box model (下)
系列文
前端新手進化史30

尚未有邦友留言

立即登入留言