文章將陸續整理並更新至個人部落格。
想像每個元素都是一個盒子，<html> 像是個超級大盒子，裡面裝著各式各樣的盒子，盒子又可以裝盒子，一個版面正是由許許多多的盒子所構成。box model 是切版中非常重要的觀念，來認識一下吧！
box model 由內容區域 (content area)、內距 (padding)、邊框 (border)與外邊距 (margin)所組成。
內容區域，裡面可能是文字、圖片、影片或其它元素。
介於內容區域 (content area)與邊框 (border)之間的範圍內。
厚度取決於 padding 屬性:
不能為負值。
預設情況下，內距不包含在屬性 width 屬性的範圍。
圍繞於邊框(border)之外，用於推開元素與其它元素之間的距離。
厚度取決於 margin 屬性，可以是正值或負值，但若為負值，可能會與其它元素重疊。相關屬性如下：
介於外距 (margin)與內距 (padding) 之間的範圍。
可以使用 border 屬性來設置邊框的寬度、樣式與顏色。
三合一縮寫語法 (三個值的順序可以互換，省略)：
border: border-width｜border-style｜border-color
亦可單獨指定寬度、樣式。屬性如下：
預設情況下，邊框並不包含在屬性 width 屬性的範圍內。
大致認識 box model 的長相後，下一篇將來看看 box model 的身材。
iThome鐵人賽
看影片追技術