RWD / CSS 筆記

# Scrimba-RWD

**講師官網：**
https://www.kevinpowell.co/

---

**CH.1 基本CSS**

1. 元素預設值
https://www.w3schools.com/cssref/css_default_values.asp

---

**CH.2 RWD**

1. object-fit: cover;

1. ARIA無障礙/可訪問性 role="main"
https://a11yproject.com/

1. flex order

1. 負Margin

1. :last-child
---

**CH.3 風格**

1. 字距行距 line-height: 1.6;
Master-Responsive Web Typography v2-Letter Spacing Polish

1. 各種選擇器 https://reurl.cc/NanGGn

1. background-size: cover;

1. Viewport units-Look at brower window-vh vw

1. 避免破版 當使用vh作為高度時 可用min-height: 100vh;

1. box-sizing: border-box;元素的實際寬、高包含了內容的寬高加上padding 和 border長度

1. justify-content: space-between;好用,比方想要上下黏住小標

1. label標籤在網頁外觀上沒有任何效果，而是協助使用者在點選到該標籤時，可以透過for的屬性值，去連動具有相同id屬性值的標籤，例如：點選<label for="male">Male</label>這個標籤時，就等同<input type="radio" name="sex" id="male" />這個標籤被選取。

1. 或是直接把<input>包在<label>裡面,等同上述8

1. inherit 繼承功能

1. transition/transform

1. background-blend-mode
https://www.slrlounge.com/workshop/the-ultimate-visual-guide-to-understanding-blend-modes/

---

**CH.4 Flexbox**

1. flex-wrap: nowrap 是否換行

1. flex-flow
這僅僅是 flex-direction 與 flex-wrap 的縮寫，所以只要在這前後帶上相對應的值即可。

1. align-items (單行) v.s. align-content (多行)

1. flex-basis

1. flex屬性將flex-grow，flex-shrink和flex-basis合併為一個速記屬性。
flex: 1 2 600px ; === flex-grow: 1 ; flex-shrink: 2 ; flex-basis: 600px ;

1. 當我們align-items在flex容器上使用時，它會影響其中的所有flex項目。有時，我們只想更改彈性項目之一的行為，為此，我們有了align-self。

1. 邊距在flex容器內的工作方式有兩個大區別：
(1) 邊距不再崩潰
(2) 設置auto為頂部和底部的邊距將使項目垂直居中，而不是簡單地將其設置為0

1. 如果flex-basis直接在圖像上進行設置，則Chrome中無法工作。為了解決這個問題，我們可以設置a min-height: 0;和a min-width: 0;

1. 非全屏像邀請卡之類的小東西想用flexbox在屏幕上居中顯示，
如果沒有margin: 0和，更重要的是min-height: 100vh，這將不起作用！

1.
| | display: block | dispaly: flex |
| ------------ | ------------------- | -------- |
| margin: auto | 水平居中/垂直無法 | 都可居中 |

> [ display: block 時設定 margin: auto，margin-left 和 margin-right 都為可用剩餘空間的一半，可水平置中。而margin-top和margin-bottom 是auto 值都為 0，無法垂直置中。
display: flex 時設定 margin: auto，在透過 justify-content和align-self 進行對齊之前，任何正處於空閒的空間都會分配到該方向的自動 margin 中去。很重要的是，margin auto的生效不僅是水平方向，垂直方向也會自動分配這剩餘空間。]

---

**CH.5 Grid** MDN：https://reurl.cc/lLXe9Y

1. 

1. 同時設定row和column：
grid-template: 100px 100px 500px / 300px 300px 100px;

1.  

1. 上述 3 的簡寫：grid-row和的grid-column，第一個值是start，第二個值是end，並且它們之間必須用 / 分隔。例：grid-row: 1 / 3。也可使用負數，會從遠端開始計數並向後移動。

1. .one {
background: #B823C1;
grid-row: 1 / 3;
grid-column: 1 / 4;
}
.two {
background: #FF5670;
grid-column: 2 / 4;
grid-row: 2 / 3;
}

1. .one {
background: #B823C1;
grid-column: 2 / span 2;
grid-row: span 2;
}
.two {
background: #FF5670;
grid-column: 1 / -2;
}

1. Grid shares a lot in common with flexbox, such as:
**collapsing margins**
**align-items**
**justify-content**
Also, **items stretch by defaut**.
But unlike flexbox, **grid items also stretch horizontally** as well as vertically.
Because of how grid works, we also have a new property: **justify-items** which we can use to justify individual items within their cells, as well as **justify-self** that we can use on individual grid items.

1. Ｑ：
align-items / align-self / align-content
justify-items / justify-self / justify-content
在 Flex 和 Grid 下, 各自作用？

1. **Using grid for our card component** **實作 Grid （ 複習 ）**

1. Create empty spaces：
grid-row-gap / grid-column-gap / grid-gap (shorthands)

1. 前述都顯式網格, 系統 auto 創建為隱式：grid-auto-rows, grid-auto-columns, 也可設定大小

1. 

1. minmax()

1. the fr unit 代表格線容器內，可用空間的分塊（fraction）能依照可用空間縮放

1. 將其1fr用作最大尺寸minmax()非常有用，但是由於fr單位的計算方式，它不被視為最小尺寸！

1. (1)**grid-template-columns: 1fr max-content;**
(2).article-info {
grid-area: date;
justify-self: end;
}

1. **grid-template-columns: 200px repeat(3, 1fr) 200px;**

1. **auto-fit** and **auto-fill** both work inside of repeat(), replacing the number of times we want something to be repeatd.
Both of them work best when combined with a **minmax()**, especially when that max value uses the fr unit.

* **auto-fit** will fit the columns you’ve defined into the available space.
* **auto-fill** will keep adding in new columns, even if they are **empty**.

---

**CH.6 Next Level 實作**

1. Small Screens
**display: grid;
grid-template-columns: minmax(1em, 1fr) minmax(0px, 500px) minmax(1em, 1fr);**
.hero > * {
**grid-column: 2 / -2;**
}

1. background-position: bottom right;

1. **position: sticky** - a new property that works much like fixed, but it will scroll with the page until it reaches a certain point, where it will then "stick".

1. Exploring box-shadows to get the effect on our images：**box-shadow**

1. **pseudo-elements**

1. **grid-auto-flow: dense**