一定要搞定它！
了解、掌握和運用DIV，是網頁寫作的基礎！
Div + Css 基礎概念講解【課堂錄影】
【CSS參考網站】
1. 為寫作區域加上邊框
語法【㊉↓】：
<div style="width: 70%; height: 40px; border: 1px solid darkred;">有加框的 DIV <br></div>
範例呈現：
說明：
1. width: 寬度、height: 高度。可以用 xx% 或 xxpx 來表示。
2. border: 1px solid darkred; 。1px：邊框的寬度，solid：框線的形式，darkred：框線顏色。框線形式常用：solid（實線）、dotted（點線）、dashed（虛線）。
<div style="width: 70%; height: 40px; border: 1px solid darkred;">有加框的 DIV <br></div>
範例呈現：
有加邊框的 DIV
說明：
1. width: 寬度、height: 高度。可以用 xx% 或 xxpx 來表示。
2. border: 1px solid darkred; 。1px：邊框的寬度，solid：框線的形式，darkred：框線顏色。框線形式常用：solid（實線）、dotted（點線）、dashed（虛線）。
2. 為寫作區域加入背景色
語法【㊉↓】：
<div style="width: 70%; height: 40px; border: 1px solid darkred; background-color: #FFFAF0;">有加框的 DIV <br>加入背景色<br></div>
範例呈現：
說明：
1. background-color: 背景顏色。顏色可以用色碼：#F4A460，或是顏色名稱：sandybrown 。【色碼表↗】。
<div style="width: 70%; height: 40px; border: 1px solid darkred; background-color: #FFFAF0;">有加框的 DIV <br>加入背景色<br></div>
範例呈現：
有加邊框的 DIV
加入背景色
加入背景色
說明：
1. background-color: 背景顏色。顏色可以用色碼：#F4A460，或是顏色名稱：sandybrown 。【色碼表↗】。
3. 調整邊框和內容之間的距離
語法【㊉↓】：
<div style="width: 70%; height: 40px; border: 1px solid darkred; background-color: #F4A460; padding: 1em;">有 加框的 DIV 。加入背景色。調整四個邊框與文字（內容）之間的距離，將距離加大。<br></div>
範例呈現：
說明：
1. padding: xxpx，是調整內容與四個邊框之間的距離。常用用 px 或 em，例如 3px 或 2em。
2. 可以單獨調整某一邊框，padding-top: xxpx、padding-right: xxpx、padding-bottom: xxpx、padding-left: xxpx，可分別單獨調整上、右、下、左邊框與內容間的距離。
<div style="width: 70%; height: 40px; border: 1px solid darkred; background-color: #F4A460; padding: 1em;">有 加框的 DIV 。加入背景色。調整四個邊框與文字（內容）之間的距離，將距離加大。<br></div>
範例呈現：
有加邊框的 DIV。加入背景色。padding: 調整邊框與文字（內容）之間的距離，將距離加大。
說明：
1. padding: xxpx，是調整內容與四個邊框之間的距離。常用用 px 或 em，例如 3px 或 2em。
2. 可以單獨調整某一邊框，padding-top: xxpx、padding-right: xxpx、padding-bottom: xxpx、padding-left: xxpx，可分別單獨調整上、右、下、左邊框與內容間的距離。
4. 調整邊框與外部編輯區之間的距離
語法【㊉↓】：
<div style="width: 70%; height: 40px; border: 1px solid darkred; background-color: #F4A460; margin: 1em;">有 加框的 DIV 。加入背景色。調整四個邊框與外部編輯區之間的距離，將距離加大。<br></div>
範例呈現：
上方的編輯內容區域。上方的編輯內容區域。上方的編輯內容區 域。
說明：
1. margin: xxpx，是調整外部編輯區域與四個邊框之間的距離。常用用 px 或 em，例如 3px 或 2em。
2. 可以單獨調整某一邊框與外部編輯區的距離，margin-top: xxpx、margin-right: xxpx、margin-bottom: xxpx、margin-left: xxpx，可分別單獨調整上、右、下、左邊框與外部編輯區之間的距離。
3. margin: xxpx，xx可以是正數，也可以是負數，例如 margin-top: -1em;【click ↑】 。負數是縮短邊框與外部編輯區域之間的距離。
<div style="width: 70%; height: 40px; border: 1px solid darkred; background-color: #F4A460; margin: 1em;">有 加框的 DIV 。加入背景色。調整四個邊框與外部編輯區之間的距離，將距離加大。<br></div>
範例呈現：
上方的編輯內容區域。上方的編輯內容區域。上方的編輯內容區 域。
有加邊框的 DIV。加入背景色。margin: 調整邊框與外部編輯區之間的距離，將距離加大。
下方的編輯內容區域。下方的編輯內容區域。下方的編輯內容區域。說明：
1. margin: xxpx，是調整外部編輯區域與四個邊框之間的距離。常用用 px 或 em，例如 3px 或 2em。
2. 可以單獨調整某一邊框與外部編輯區的距離，margin-top: xxpx、margin-right: xxpx、margin-bottom: xxpx、margin-left: xxpx，可分別單獨調整上、右、下、左邊框與外部編輯區之間的距離。
3. margin: xxpx，xx可以是正數，也可以是負數，例如 margin-top: -1em;【click ↑】 。負數是縮短邊框與外部編輯區域之間的距離。
使喚div的三種方法：
一、直接使用
style="xx"
<div style="width: 70%; height: 40px; border: 1px solid darkred;">
內容
</div>
二、使用class
（可重覆使用）或id （只能用一次）
<style>
.classname {
width: 70%;
height: 40px;
border: 1px solid darkred;
}
#idname {
width: 70%;
height: 40px;
border: 1px solid darkred;
}
</style>
<div class="classname" id="idname">
內容
</div>
說明：
（一）一和二相同重覆，以一為凖。也就是 style 是大於 Class 。
（二）class和id相同重覆，以id為凖。
Advanced：圖像（文字）的位移有三種方法
圖像以及文字，如果想要移動其在版面上的位置，可以有三種方法來處理。
一、使用「空白鍵」來增加「空白字元」。
就是不斷的按「space」「 空白鍵」，用增加「空白字元」（ ）的 方法，來移動圖像或字元。
字元或
這裡是空白鍵↑
二、在上層加上<div>xxx< /div>，再使用居左、居中、居右語法
使用「內容位移」語法 style="text-align: left;" //left, center, right //左、中、右，來位置圖像或文字。
語法：
<div style="text-align: center;">這是文字或<img src="xxx"></div>
呈現：
這是文字或
三、使用DIV「留白」的語法，從左邊增加留白，也可以移動位置
留白的語法，可在DIV使用，也可以在其他「塊狀/ block」媒材物件，如 td、p等，都可使用。 一般而言，使用左邊留白 style="padding-left: 10px;" ，來決定向右移動距離。
語法：
<div style="padding-left: 8em;">這是文字或<img src="xxx"></div>
呈現：
這是文字或
這是留白8em↑
