3-2 CSS盒狀模型

一、 區塊<div>或段落<p>常用CSS設定

1. 尺寸：width:寬度px; height:高度px; （亦可用 80% 這樣的呈現方式）
2. 邊框：border: 1px solid #FF0000; （粗細 框線類型 顏色）
3. 外邊界：margin: 10px auto 20px auto（上 右 下 左）←就是順時針
4. 內間距：padding: 30px;（上 右 下 左）

• (1)  凡是有上右下左的屬性，都可以分開寫。例如 border、margin、padding等屬性。
• (2)  margin-top:10px; padding-bottom:15px;

1. 首行縮排：text-indent: 24px (亦可用%)
2. 大小寫：text-transform: capitalize (首字大寫) , uppercase(全大寫) ,lowercase(全小寫)
3. 擬元件（Pseudo-elements）建立一個抽象的網頁元件，例如「段落第一行」或者「段落第一個字」，而且也提供另一個方法來套用樣式到一個不存在的內容。（:before 及 :after）。

• (1)  :first-letter 設定目標第一個字的樣式
• (2)  :first-line 設定目標第一列字的樣式