HI 今天start

(因為要出去玩，所以超級早發

漸層

1. 線性漸層 : linear-gradient()
   他有3個設定值，角度(deg)、方向、色彩停止點
   

2. 放射漸層 : radial-gradient()
   他有4個設定值，形狀、大小、位置、色彩停止點
   

3. 重複漸層 : repeating-linear/radial-gradient()
   就是分別重複漸層啦
   

Box Model

• 是CSS的重點之重啊~這裡面包括了幾乎所有的網頁編排方式，這裡才是網頁設計的重點啊~
• Box Model指的就是把每一段的HTML元素看作一格方塊，所以稱為box。放--- 在box裡面的有，內容(content)、留白區(padding)、框線(border)、邊界(margin)，就像等高線地形圖一樣組成了這個區塊的HTML顯示方式。
  看下面這張圖，可以很明確的看出Box Model的構造。
  

1. 內容(content)，最中間的藍色，顯示於網頁上的資料
2. 留白區(padding)，綠色部分，主要是環繞內容一圈，當我們像前面一樣設定背景時顯示的地方就是內容區和留白區。
3. 框線(border)，淺橘黃色，留白區的框線
4. 邊界(margin)，最外圍的皮膚橘，用來控制box之間的距離
   

• Box裡面也是有分上下左右，直接上圖
  

而這些不全代表著所有的設定屬性。
這裡面可以分成5大屬性，分別是邊界、留白、框線、寬和高、定位。
重點:
！所有的屬性都有4個可以更改設定的地方，top、bottom、left、right。
！當有2個值時，第一個會套用到上下，第二個值會套用到左右。當有3個值時，第一個會套用到上，第二個值會套用到左右，第三個會套用到下。當有3個值時，順序是上右下左。

邊界屬性 : margin-

有3種設定值，預設值君為0
設定值也熟悉，長度、百分比、auto(預設)

這邊是4個值都被我改成不一樣的了

這是網頁呈現的樣子

留白屬性 : padding-

有2種設定值，預設值君為0
設定值，長度、百分比
第一組

第二組

今天的內容比較少，但是box model的概念超級重要