CSS
===

選取器{
    屬性:值;
    屬性:值(可以多個);  
}

## 寫法
1. 直接寫在HTML中 => inline style
> 可用在蓋板廣告搭配 display: none

<p style="color: red; background-color: gray;">
    這邊是一段落的文字
</p>

2. 寫在< style>< /style>中

< style> //選取整份文件的p做修正
    p{
        color: red
    }
< /style>

## 選取器
### 優先權
> 1. 同級選取器後者會蓋掉前者
> 2. (!important) > (animation) > inline style > ID > class＝偽類(:horer)＝屬性選取器[ ] > tag > *(什麼都選) > 繼承
> 3. 子層如果沒有明確設定，會繼承父層的設定
> 4. 分數計算來看誰蓋掉誰

### class
> 空白格 =>『裡面的』 (Eq:ooxx裡面的info)

舉例：

<p class="ooxx info">
戰鬥電源戰鬥手中革命貸款，開始出口不停球員位於全家我要當地大幅這樣模樣笑話感覺父親道路，任務總統抽。
</p>
    
<p class="ooxx sp">
如果效率收益沒有任何家電支撐讓你感到老婆，應該更加家園推薦使用開展默認重要不敢有一些留下，多種螢幕。
</p>

<p class="ooxx box">
造成感到天堂車輛孤獨一遍對你到達中文版類似，一週可憐大聲即可人間大約把握鈴聲下載物理要求其中，導航。
</p>

以上面的例子來說：
三段分類為ooxx所以在選取器.ooxx會一次選取三段。
而.info就是選取第一段、.sp選取第二段、.box選取第三段。

## inline v.s. block
#### inline
> 1. 標籤顯示時會跟其他標籤排在一起
> 2. 只要有inline特性就會很像排列
> like:inlike--block, inlike-Grid...etc.

#### block
>1. block會佔掉一列空間，其他標籤自動排在block外。
>2. 只要有block特性，就能設定width & height

比較：
| | inline | block |
| ------------ | -------- | -------- |
| width/height | Ｘ | Ｏ |
| 預設寬度 | 內容撐開 | 填滿父層 |
| margin 左右 | Ｏ | Ｘ |
| margin 上下 | Ｘ | Ｏ |
| padding 左右 | Ｏ | Ｘ |
| padding 上下 | Ｘ | Ｏ |
| 預設排列方向 | 橫向 | 直向 |
| transform | X | Ｏ |
| 空白字元問題 | Ｏ | Ｘ |
| text-align | Ｏ | Ｘ |
| vertical-aligh| Ｏ | Ｘ |

一、如何解決block的排版問題？
> 使用屬性 display: inline

二、如何解決inline空白字元的問題？

> 舉例：

<nav>
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
</nav>

> 1. < a>跟< /a>中間寫在一起
> 2. 將空白格註解掉
> 3. 設定font-size: 0px;
> 4. 在超連結之間設定外距=> nav a + a{ margin-left: 16px;}

三、如何解決圖片(inline)在div中下方有一條空白？

> 1. 設定圖片的vertical-align
：文字及圖片都會有baseline，所以圖片在div中如果在vertical-aligh: baseline || 沒有設定垂直對齊時，下方會出現一條空格。只要不讓圖片和baseline垂直對齊就能解決空格的問題。
> 2. 將圖片display: block;

## 尺寸計算
block預設的寬度是父層conteent-box的寬度

### box-sizing
值只會有content-box || border-box
改變weidth以哪個box為基準

## flex
==**display: flex 作用於子層，所以要寫在父層上！！**==
> 作用：讓block可以排列

> 讓物件不會超出父層

> flex子物件的預設寬度，是==子物件內容==的寬度(圖片就圖片的寬、文字就是文字的寬)

排列的預設方向：預設的語言書寫方向

### flex-direction
>改變排列方向

1. ```row``` : 左至右 橫著排
2. ```row-reverse``` : 右至左 橫著排
3. ```column``` ： 上至下 直著排
4. ```column-reverse``` ： 下至上 直著排

*1. Notice that when you set the direction to a reversed row or column, start and end are also reversed.*

*2. Notice that when the flex direction is a ==*column*==, ==*justify-content*== changes to the ==*vertical*== and ==*align-items*== to the ==*horizontal*==.*

### flex-wrap 會產生彈性列
> 子層方框超過父層寬度，自動換行
> wrap是控交叉軸的方向（資料的流向）
>

1. ```nowrap```: Every item is fit to a single line.
2. ```wrap```: Items wrap around to additional lines.
3. ```wrap-reverse```: Items wrap around to additional lines in reverse.

### flex-flow
> ```flex-direction```和```flex-wrap```的縮寫屬性，兩個一起作用。
1. ```row wrap```: 改橫著排，然後自動換行。
2. ```column wrap``` : 改直著排，然後自動換行。

💡想想看：
>- 控制對象是誰
>- 空間是誰
>- 軸是誰
>- 作用是什麼

### justify-content 作用於子物件
>：控制 子物件 在 父層空間中 主軸 的對齊及分佈
> 作用：對齊、分佈

1. ```flex-start``` || ```flex-end``` 改變主軸方向
2. ```space-between``` 將空白區域平均分配到方框(子物件)之間
3. ```space-around``` 將空白區域平均分配給方框(子物件)的主軸(兩邊)
4. ```space-evenly``` 將空白區域平均分配給方框(子物件)兩側

### align-content 作用於空間
> : 控制彈性列 在父層空間中 交叉軸 的對齊與分佈
> 作用：對齊、分佈

1. ```flex-start``` || ```flex-end``` 改變彈性列方向靠起點 或 終點
2. ```space-between``` 將空白區域平均分配到彈性列之間
3. ```space-around``` 將空白區域平均分配給彈性列兩邊
4. ```space-evenly``` 將空白區域平均分配給彈性列兩側

### align-items 作用於子物件
> ： 控制 子物件 在彈性列中 交叉軸 的位置
1. ```flex-end``` 子物件一起往終點移動
2. ```flex-start``` 子物件一起往起點移動
3. ```center``` 子物件一起往中間移動
4. ```bacelie``` 子物件一起往基線移動

比較三者：

| | justify-content | align-content | align-itens |
| ---- | --------------- | ------------- | ----------- |
| 控制對象| 子物件 | 彈性列 | 子物件 |
| 作用空間| 父層空間 | 父層空間| 彈性軸 |
| 軸是誰| 主軸 | 交叉軸| 交叉軸 |
| 作用| 對齊與分佈(有space) | 對齊與分佈有(space) | 對齊 |

### order（排序）
1. default值為0
2. 以自己為中心，向左一格：-1 ; 向右一格：1
3. 會依照值的大小進行排列（小->大）eq:0, 0, 1 || -2, -1, 0...etc.
4. 如果物件的值一樣，依照==資料的順序==排列

### flex-grow 伸展值
> 讓子物件取得父層剩餘空間

### flex-shrink 收縮值
> 預設就是子物件都會收縮。
> 如果子物件寬度加總超出父層的話，就是子物件都會收縮。

### flex-basis 基本
> flex子物件在主軸上的長度

使用情況

## 偽元素(假的元素)
> - 一個元素只能產出兩個偽元素
> - 產出在元素“裡面”
> - 出現在“元素==內容==”的頭或尾
> - 一定要搭配content

### ::before

p::before {
    content: '假的'
    color: red
}

//在p的文字中最前面會產出紅色的假的文字，但你選不到它

### ::after

p::after {
    content: '假的'
    color: red
}

//在p的文字中最後會產出紅色的假的文字，但你選不到它

---
0326 CSS Note

## 屬性
### 文字折行

<style>
.box {
    width: 200px
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /* 顯示幾行 */
    overflow: hidden;  /* 折掉的行數隱藏 */
}
</style>

<!-- -webkit-：前贅字 (p18) -->

### 錨點連結

<style>
    /* 注意選取器 */
    html,body{
        scroll-behavior: smooth;   /* 讓滾動時很斯滑的屬性，可搭配 */
    }
</style>

<body>
    <!-- section.section${$}*5 --> 快速新增寫法
    <nav>
        <a href="#sc1">S1</a>   <!-- 點這顆超連結會跳到id為sc1的section頁面 -->
        <a href="#sc2">S2</a>  
        <a href="#sc3">S3</a>
        <a href="#sc4">S4</a>
        <a href="#sc5">S5</a>
    </nav>
    <section class="section1" id="sc1">1</section>
    <section class="section1" id="sc1">2</section>
    <section class="section1" id="sc1">3</section>
    <section class="section1" id="sc1">4</section>
    <section class="section1" id="sc1">5</section>
</body>

## 定位（有定位會比沒有定位的層級高，會覆蓋到其他層）

#### static：取消定位時會使用，會覆寫下面的定位設定(使用時機很少)

#### fixed(固定定位)
> 1. 定位參考範圍：視口 viewport(可以看到頁面的範圍)
> 2. 會停在原地，即便捲動頁面，它依然在那邊(與視窗上緣的距離不變)
> 3. 情況：製作導覽列時，蓋到第一排的內容解法 => 從父層去更改高度：margin || padding

#### absolote(絕對定位)
> 1. 定在具有定位設定的父層，如父層都沒有定位及會找第一個視口的範圍
> 2. 父層可以是任何定位除了static

#### relative(相對定位)
> 1. 定位參考範圍：自己原本的空間
> 2. 不會從原本的位置離開

#### sticky
> 1. 只會黏在父層空間中
> 2. 有相對定位佔據空間的特性
> 3. 有fixed固定的特性
> 4. 要設定一個top (參考與視口的距離)
> 例如 top: 10px => 在距離視口10px的距離開始黏在原位

#### z-index 控制層級，給值的那個比較大(會在上層)
> 1. 能夠不要用負值就不要用 (p388)
> 2. 用層去看

情況：

<div class="A fixed z3"></div>
    <div class="B relative z4">
        <div=class="B-1 relative z1“></div>
    </div>
    <!-- Ｂ-1在z4的第一層，所以還是比A上層 -->

## grid
1. 畫格子
2. 格子不用跟父層一樣大
3. 固定數值的格子可以用repeat()

>content 空間 => 控制底下的格子
>items 子物件 => 控制子物件

#### grid-row-start (end) || grid-column-start (end)
無設定時預設第一個row 或 column
可在row 或 column中，指定網格的起始格(結束格)

grid-column-start: 3
<!-- 從第三個cloumn(直欄)開始，此時的row預設是第一個row -->

這些屬性的值也可以使用``span``，``span``為空幾格的意思，例如：

grid-row-start: span 3
<!-- 空三個row(橫列) -->

#### grid-row || grid-column
這邊是將``start``及``end``寫在一起：grid-row: Start/End; ，值一樣可以使用``span``
例如：

grid-row: 2/span 3
<!-- 從第2個row(橫列)開始，空3格結束 -->

#### grid-area
：grid-row-start, grid-column-start, grid-row-end, grid-column-end
> 💡 都由row先開始
>

##### grid的值 縮寫
justify-content
align-content
>place-content: A J;

justify-items
align-items
>place-items: A J;

justify-self: center
align-self: center //也可以直接寫 margin: auto

>place-self: A J;

下課後需要再整理筆記

### 多重選單製作
舉例參考 0329 多重選單製作.html

1. 用``<ul>`` 、 ``<li>`` 及 ``<a>``製作
2. 設定padding時，要設在``<a>``上，才能達到摸到a文字外圍空白處也有作用
3. 設定:hover，要設在``<li>``上，才不會造成：摸到a文字顯示子選單，但點選不到(因為離開a文字後，子選單就會因為沒有:hover而消失)

### 動畫 transition
> 使用在可以計算的屬性上 例：半透明背景
> 不能使用 例：display: none => display: block無法使用

如果使用transition交換兩張圖片，可以有淡入淡出的效果嗎？
答：不行
但是，因chrome系統設定，會讓兩張圖片在交替時產生淡入淡出，原則上是不會有這樣的效果的。(這是不合理的例外)

> 在原本的屬性 && hover 上都設定transition，摸到時會先跑hover的transition，離開時才會跑原本屬性上的。

### 比較讓物件消失的屬性

#### display: none
> 直接消失，摸不到，不佔空間
#### opacity; 0
> 看不到，摸得到，也還在那（一樣會卡在原位，佔空間）
#### visibility: hiddwn (比較少用到)
> 看不到，摸不到，但還在那（佔空間）

<!todo-- 製作表格比較 -->

### 盒模型動畫(搭配transition)
情況一：摸到border變粗
作法：
1. 使用box-shadow，因為box-shadow不會佔盒模型的空間。
2. 使用outline，因為outline也不會佔盒模型的空間。

情況二：如果想用box-sizing: border-box 可行嗎？
答：會有範圍的問題，像是旁邊的字或區塊會被擠壓移位，除非把高度寫死。

## 自訂屬性
> 開頭為兩個減號，名稱自己定義 例：- -ooxx: #fa0
> 要放進去使用做法 例如：background-color: var(- -ooxx)

不一定要寫在 :root 裡，也可以直接寫在屬性裡面。

## RWD
1. 解析度
把小於平板的裝置都當成手機去寫
記得平板 && 桌機的解析度即可
直 寬
ipad mini 768 * 1024
air 820 * 1180
pro 1024 * 1366
---
mac 1440
window

結論：
大於768 =>平板
大於1024 => 平板橫向
大於1200 => 桌機

2. 媒體查詢
應用：

@media screen and (min-width: 1200px) {
    .box {
        background-color: #f00
    }
}

以上的程式碼解釋為：你的媒體設備最小寬度不到1200px時，視窗裡的box的背景顏色會改為#f00色

## 格線系統

> **落實容器與物件分離，才能有效使用格線系統**
> ⚠️在格線系統外層使用 .container 可避免頁面出現水平卷軸，並正常產生 gutter on outside，讓頁面排版更為穩定。
> ⚠️內容須寫在.col-*的內層

**疑問一：gutter是如何產生的?**
圖片上半部為原理解析，下半部為網頁頁面上會呈現的排版畫面。

當我們使用格線系統來排版，.col-* 區塊的左右兩邊皆會產生 padding(圖片中藍色部分)，而當兩個 .col-*區塊碰在一起肩並肩，gutter就形成了 !

---

**疑問二：沒碰在一起的外部那兩個藍色 padding 上哪去了? 為什麼 .col- 區塊外層的寬度會是剛好貼齊 .row 的兩邊呢?**
原因是因為在 .row的設定中，外部兩邊分別加上了負值的margin，將 .col-* 的最外側這兩邊的 padding 給補足(消除)了。

---
**疑問三：gutter on outside又是如何產生的?**
上面有提到，在格線系統外層使用 .container 可避免頁面出現水平卷軸，並正常產生 gutter on outside (也就是圖片中外層橘色部分)，其產生的方式就是在.container設定左右各有 15px 的padding。

總結：如果沒有在 .row 設定負值margin去覆蓋.container的padding: 15px; 的話，畫面會有跑版的問題，因為在