Box Model 與 Display Property

在這邊稱此圖為「元素」。

一、盒模型組成：

1. content: 元素裡的內容，有可能是文字或圖。
2. padding: 在 border 之內，content 之外的透明區域（spacing inside the border）。
3. border: 邊框，包覆 padding 和 content。
4. margin: 在 border 之外的透明區域（spacing outside the border）。
5. 方便方別調整四個邊的樣式，還有區分 top、right、bottom、left，依照名稱長短有兩種屬性（property），以 border 舉例：

(1) individual property

• a. border-left
• b. border-right
• c. border-top
• d. border-bottom
• e. 舉例： border-bottom: 5px;，即為 border 的下邊為 5px 的粗細。

(2) shorthand property

• a. border: Apply to all four sides
  border: 10px;

• b. border: Vertical | horizontal
  border: 5px 10px;

• c. border: Top | Horizontal | Botton
  border: 1px 2px 3px;

• d. border: Top | Right | Bottom | Left
  border: 5px 1px 0 2px;

二、border

1. 簡介 border style

• border-width: 控制 border 粗細。
• boder-color: 調整 border 顏色。
• border-style: 調整 border 類型，如dashed（虛線）、solid（實線）。
• border-radius: 20% or 5px: 調整 border 四個邊角的弧度，舉例可以使用的單位有：% 及 px。
• box-sizing: border-box;

2. 實際應用：

表示方法有好幾種：

• 表示方法：border - <side> - <style>
  • <side>: top, bottom, left, right
  • <style>: color, width, color, style
  • 舉例：
    • border-top-color: yellow
    • border-left-width: 3px
    • border-right-style: dotted

• 常用的表示方法：

三、padding

1. 簡介 padding

在 border 之內增加透明的區域，所以在 content 與 border 之間有一個間隙。

2. 實際應用

Shorthand Property

1. pading: Apply to all four sides:
   pading: 10px

2. pading: Vertical | horizontal:
   padding: 5px 10px;

3. pading:Top | Horizontal | Botton
   padding: 1px 2px 3px;

4. pading: Top | Right | Bottom | Left
   Padding: 5px 1px 0 2px;

四、margin

元素邊界外面與其他元素的邊界外的區域。

五、Display Property（屬性模式）

在講屬性模式之前，要先講一下在 html 裡各標籤（tag）會根據不同的元素的形式，在網頁裡呈現不同的預設模式（default display value）。
先舉例介紹一下在 html 裡，不同的標籤都有其預設的 display property。可以分成inline-level element 及 block-level element：

以 <span> 及 <div> 為例子，可以發現被 <span> 包住的「成功登入」，仍與內文在同一行（row），沒有換行，可以知道：在 html 裡 span 是屬於 inline-level element；被 <div> 包住的「成功登入」自己佔一行，得知在 html 內， div 屬於 block-level element。若要更詳細得知 html 的標籤各是什麼元素。

現在知道 html 標籤都會有一個預設的顯示模式（default display property），既然是預設的顯示樣式，那就可以更改，那要怎麼更改呢？
我們可以透過在 CSS 的 display 將元素賦予新的 display property，來改變原本預設的顯示模式，如此一來，就可以將版面改成我們想要呈現的方式，是放在同一行呢？或者是直放放在一欄。

以下是可以修改預設 display property 的舉例：

1. display: inline;
2. display: block;
3. display: inline-block; （可以呈現inline，同時保有區塊的特性）

1. display:Inline;
   在 inline 的文字或圖片都不換行，放在同一行。inline 特性就是高、寬度、padding、margin 都不能改變，也就是說：放在同一行的文字或圖片就是本身的寬度。

使用時機：當元素呈現 block 的排列，又想要把他改成同一行的排列時，就需要使用到 inline。

1. display:block;
   元素會以區塊的方式呈現，而且預設的寬度是 100%，如果沒有特別設定，寬度會佔滿視窗。區塊的特性就是可以自行設定寬度、高度、padding、margin。

使用時機：因為 <img> 預設顯示模式為 inline，但在刻靜態網頁的時候，除了考慮電腦版，也要考慮手機版，在電腦版中，圖片可以維持原預設的 inline 模式，但是在手機版，因為畫面變為狹長，圖片無法並排而列，就要改成 block，此時就需要 display: block，將圖片直直列下來，方便手機觀看。

1. display:inline-block;
   將同一層的元素保持在同一行（inline），但這些元素可以設置各自的寬度、高度。換句話說，顯示方式很像 inline-element，但是保有自己的寬度（width）、高度（height）、margin、padding。

使用時機：當在切版時，會使用 div 將網頁切成各個區塊，如 navbar、footer等，但是 div 的預設為 block，但是我們一般在電腦版網頁上的 navbar 都是一行（row）列出來，如：加入購物車、會員訊息、優惠券查詢，此時就會希望把 div 預設的 disply property —— block，改為 inline-block，同時又保有 block 可以更改。

比較