# 第三週直播筆記 by 夏天
---
###### tags `夏天`
---

參考資料
金魚的rwd
https://www.youtube.com/watch?v=0FayRAu1du0

---

本日直播文件
https://rpg.hexschool.com/training/21/show?embedhm=lYFK_AxxT2KiDuXlWTaYBw

---

去公司上班第一件事情是安裝環境，每個公司也都會有每個公司自己的環境(比方說gulp、docker、PHP+MYSQL)，而且絕大部分**不會**有人幫助你。

---

響應式設計在head一定要加入
**<meta name="viewport" content="width=device-width, initial-scale=1.0">**

螢幕解析度設定，若滿足解析度條件則會開啟此(css)設定

---

## 先看權重，再看先後(以css為主不看html)

* html標籤選擇器1分
* css類別選擇器10分
* id選擇器100分
* inline style 1000分 寫在html的style，通常用來設計動畫用 (這樣寫不要說是六角出去的學生XD)
* !important 10000分(直接加在css後面)

通常寫css樣是只會用到前兩個，寫js才會用到id和inline style選擇器

:::warning
h2.title→**標籤選擇器加上類別選擇器**這種寫法不要寫，因為雖然樣式一樣，但在其他頁面可能會下不同的類別選擇器，所以h1~h6不要在一開始就寫死font-size和line-height
:::

---
id選擇器為一個錨點，通常一個id選擇器只會用一次，在舊制網頁架構裡如果id選擇器重複使用會出現網頁跑不出來的結果
**id="xxxxx"** →不要用:rage:

---

###### 職場鬼故事
* 拿到前輩的code用後面的css樣式去覆蓋前面的樣式，而不是直接去改，不要得罪前輩

---

.tltle li a ,.title se a →12分

---
* 常用斷點
max-width:768px
max-width:375px
max-width:992px→ipad
max-width:767px→手機

* 如果今天剛好768，則會維持在(max-width:768px)的設定，螢幕解析度768px以下則是這個設定

* 由於css的樣式會後面覆蓋前面設定，所以要從螢幕解析度最大寫到最小，否則樣式都開啟後會依照順序被覆蓋
因為條件都被滿足，所以後面會覆蓋前面條件

* @media screen
* 特定載具的話則需要寫，比方說iPad或 mobile

---
.container{
max-width: 1200px;
margin: 0 auto;
}

1. max-width為會自是應父層階級寬度調整大小
2. max-width最大可達指定之px大小，不會無限延伸
3. 內容版面大小(包含margin等)都用百分比方式去計算，會依照父層(container)去計算
4. **max-width外層設計+%去做分配(只要所需要呈現的內容需要依照比例去呈現就用比例去做分配)**
5. **magin和padding上下不要用%去推，左右可以用，因為每個瀏覽器的解析度不同，上下建議用行距去留白，上下可直接寫死px**
6. container通常會留下一個padding左右內縮15px

---

必加
* *::before,*::after{
box-sizing: border-box;
}

* img{
max-width:100%;
height:auto;
vertical-align:middle;
/*防止圖片有神秘2px*/
}
1. 圖片會依照視窗大小自適應，高度會隨著寬度比例自動調整，自適應就不會破版

---
外層已經下過的css指令和設定不需要重新再重複寫一次

---

圖片取代文字
overflow: hidden;
text-indent: 101%; /* 首行縮排 */
white-space: nowrap;

---

flex-wrap:wrap;(自動換行)
搭配內元件修改寬度來推擠內容向下

main區塊
content:75%
sidebar:20%

768px→
content:100%
sidebar:100%

---
column:如果內容比較不規則則建議使用
flex-wrap:如果東西都滿版是規則排序的話建議使用

---

可研究rem單位，1rem=16px
a標籤超連結寫法