# HTML/CSS的基本常識(二)

> 嘿～你好! 我是Mizok
> 這是一篇為NEUX提供的課堂講義
> 講義內容主要是為了讓設計師/PM能夠快速對切版的常識有一些基本的理解
> 以便在工作過程中能夠對一些工序的難度有基本的判斷能力
> 在這篇講義中我們會使用[jsfiddle](https://jsfiddle.net/)來作為實際演練的平台

## 樣式 Style

如果說`html`是骨架，那麼`css`就像是外衣。

html為網頁定義了基本的父子層巢狀關係，而css則是為網頁元素定義『樣式』，也就是每個元素的長相。

這邊有一個簡單的範例，在這邊我們規定網頁裡面『所有的`div`』都有『背景色為紅色，且長寬各為50px』的樣式設定：


> 像上述這樣直接給予全體div樣式的做法其實不常見，原因是因為`div`的用途太廣泛了，所以一般來說不會給`div`一個共用的樣式，而是會把樣式賦予在**標記**（Selector）上面。

這邊我們示範一下要怎麼樣把樣式賦予在**標記**(Selector)上面:


> 標記其實不只有"class"這一種, 除此之外還有"id","attribute", 有興趣可以自己再google看看(或是來問我)

## 排列 Arrangement

在預設情形下，網頁元素的排列方式為：

**從上到下，從左到右**。

在預設沒有外部因素影響的狀態下，把兩個`div`放在一起，就會由上而下的排列這兩個`div`：

<div class="a"></div>
<div class="b"></div>

.a{
   width:50px;
    height:50px;
    background:red;
}
.b{
   width:50px;
    height:50px;
    background:green;
}


`div`之所以有這種行為，是因為他預設是一種**非行內類型**（non-inline-type）元素。

**非行內類型元素**的特性之一就是與其他相鄰的**非行內類型元素**會預設呈**垂直排列**

那麼反過來說，如果我們要讓兩個元素之間變成**水平排列**，其中一種方法就是讓這兩個元素都變成**行內類型**(inline-type)元素。

那麼要怎麼樣讓普通的`div`變成**行內類型**元素呢?

這就要透過改變`div`的`display`樣式屬性，把值改為`inline`或`inline-block`

> `inline(行內)`元素和`inline-block（行內塊級）`都是一種**行內類型**的元素，他們的差別就在於是否有塊級(Block-type)屬性，當一個元素*不具備*塊級（block）屬性的時候，賦予它`width`、`height`是不會有作用的。


> 把排列規則改變為水平排列其實並不只有『把`display`改成`inline`或`inline-block`』一種，有興趣多了解的可以再來問我。

## 盒模型 Box Model

所有的元素都有『盒模型 （Box Model）』這種特性，所謂的盒模型 （Box Model）其實就是『內距（padding）』、『外距(margin)』、『邊框（border）』所形成的一種洋蔥狀結構。

盒模型 （Box Model）是用來決定元素之間排列狀況用的基本設定之一，透過調整『內距（padding）』、『外距(margin)』，我們可以快速的決定一個元素的內部留白或與其他元素的距離為何。

### 要怎麼檢查一個元素的盒模型狀況？

大家應該都有用過`Chrome`瀏覽器的**開發者工具(DevTools)**

> 就是你在畫面上點右鍵按**檢查**會出現的那個視窗


### 簡單的試用一下吧

我們沿用前面的範例，然後透過給予.b元素`margin-left`的方式來給兩個水平排列的方塊之間添加間距。

.a{
  width: 50px;
  height: 50px;
  background-color: red;
  display: inline-block;
}

.b{
  width: 50px;
  height: 50px;
  background-color: green;
  display: inline-block;
  margin-left: 20px; 
  /*給予.b 20px的左外距*/
}

> 除了這邊提到的`margin-left`，當然也有`padding-left`、`border-top`...,etc.


## 定位 Position

我們在前面有提到如果要改變元素的位置，那麼大家想到的第一種作法應該會是調整`margin(外距)`，就像下面這樣：


但是這種透過外距（margin）來調整元素位置的方法其實使用場景很有限。

例如像是下面這種類型的排版：

> 這邊我們需要一個寬度（但高度不固定，會根據裡面內容自動撐高）跟視窗大小一樣的長方形（width:100%），而長方形的內部左側要放置一個綠色方塊, 而長方形的右側底部則是要放另一個紫色方塊。


像這樣的排版類型在*多數狀況*下就不會使用margin(外距)來做定位。

這種情形下通常前端切版會使用的作法就是把元素的`position（定位）`屬性改為『絕對定位（absolute）』。

<div class="a">
  <div class="b"></div>
  <div class="c"></div>
</div>

.a{
  background-color: red;
  position: relative;
}

.b{
  width: 50px;
  height: 50px;
  background-color: green;
  display: inline-block;
}

.c{
  width: 20px;
  height: 20px;
  background-color: purple;
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
}

### 絕對定位帶來的負面影響 - 體積丟失

絕對定位看上去非常的方便，我們只要單純的決定垂直與水平的位置，就可以快速的定位好一個元素。

但是前端切版卻只有在特定的場景才會用這種做法，為什麼?

原因就是因為被設定為絕對定位的元素，會喪失『體積』

以下面這個狀況來講, 我們分別把一個`.a元素（紅）`和一個`.b元素（綠）`都設為**絕對定位**, .a置於左上，.b置於右上，這時候我們把螢幕縮窄一點

會發現a和b竟然**重疊**了，這個就是因為a和b因為都是**絕對定位**所以都沒有各自的體積，所以當*螢幕寬度不夠*時就不會產生例如『**折行**』之類的狀況。


## 練習：利用到目前為止學習的常識自己寫一個header出來


點我看[解答](https://jsfiddle.net/mizok/ny5vjdwg/22/)

----------

# 網頁動畫的常識

## WEB專案中的UI動態特效有哪些？

> 所謂的動態特效應該理解成：某個圖形，在某個時間點，從狀態A，根據某種運動曲線(Easing)運動一段時間(Duration)之後，變成了狀態B。 組合不同的狀態A、狀態B、某時間點、Easing，與Duration可以產生各式各樣的動態

Web專案中的UI動態特效大略可以分成三種類型
- 屬性漸變動態
- 路徑動畫(Path Animation)
- 逐格動畫

### 何謂屬性漸變型動態？

藉由讓樣式在一定規律下隨時間改變而產生的動態