3.8 排版 - 區塊模型(Box Model)

認識 Box Model

margin：border 往外的距離。

padding：內容與 border 的距離。

border：該元素的邊框。

margin 和 padding 縮寫

分別都有:

• margin-top、margin-right、margin-bottom、margin-left

• padding-top、padding-right、padding-bottom、padding-left

margin: 10px;                /* 上、右、下、左，皆 10px */
margin: 10px 20px;           /* 上、下皆 10px；左右皆 20px */
margin: 10px 20px 30px;      /* 上 10px；左右皆 20px；下 30px */
margin: 10px 20px 30px 40px; /* 按照上、右、下、左的順序，依序為 10px、20px、30px、40px */

padding 縮寫形式相同。

區塊大小(box-sizing)

常用的有兩個值：content-box 和 border-box：定義的是寬高從何處算起。

• content-box：(預設值)，設定 width 或 height 時，寬度、高度指的是內容寬。

• border-box：設定 width 或 height 時，寬度、高度指的是從邊框也算進去，包含 padding。

例：

認識寬高長度單位

常用屬性

• width

• height

• min-width：限定該元素的最小寬度是多少。

• min-height：限定該元素的最小高度是多少。

• max-width：限定該元素的最大寬度是多少。

• max-height：限定該元素的最大高度是多少。

常用單位

• px：pixel。像素。例 50px。

• %：百分比。例：50%。

• vw：Viewport Width。視埠寬度。例：50vw。

• vh：Viewport Height。視埠高度。例：50vh。