# HTML(9/10) Day 21 五倍紅寶石(第八屆共筆)(2021/7/26)
## 等比例縮放：
1. 使用 img：
把素材放 img 裡面，利用外面的 img 去做縮放。
2. aspect-ratio：(IE 不支援)
用 aspect-ratio 直接按比例縮放，560/315 跟 16/9 的比例相同，寫哪個都可。
3. 用 padding-top 或 bottom + 絕對定位：(常用且所有瀏覽器都適用)
- 製作等比例區塊。
- 用絕對定位抽離 iframe 取得 border 內的空間。
- 設定 iframe 寬高 100%。
- padding-bottom % 是用 315/560 算出來的。

- html 的高度是被 body 撐開的。
- body 的高度是被裡面的內容撐開的。
- box 本身則沒有高度，是使用 padding 的高度。

padding-top(bottom): 50%，代表的是他**父層寬度**的 50%。

### 嵌入影片或地圖：
- YT:分享 => 嵌入 => 貼到VScode
- Google Map:分享 => 嵌入地圖 => 貼到VScode

---

## 選單：
因為要覆寫的東西太多，會造成效能變慢，所以拆成兩個 CSS 寫。
選取器:checked 可以讓框框或 label 被點到後打勾。
display:none 只有 0 跟 1，如果要做動畫要用 opacity 或搭配 position 用 trbl 做偏移。

---

###### tags: `HTML` `CSS`