---
# System prepended metadata

title: Astro課程 0715 - CSS(Day6)
tags: [astro, ' RWD', ' css']

---

---
title: Astro課程 0715 - CSS(Day6)
tags: astro, css, RWD
---

## 時間軸
10:40 偽類
10:50 Toyota 切版
11:00 `font-size: 0`解決`inline-block`空白字元問題
11:10 `top:`要計算移動後的間距 --> 改用`margin-top:`
11:15 margin 塌陷的問題 (父層吃到子層的margin)
11:26 灰色block 使用 `::before`
11:36 container改背景色
11:48 首行縮排效果
12:05 紅線 + 折行 + 點點
12:15 交錯
12:25 交錯Demo
13:41
14:41 格線系統
14:50 格線系統化為RWD
15:17 等比例縮放的需求


# 切版問題討論

- 哪些用絕對定位? 哪些用相對定位? [複習定位](https://hackmd.io/bd9SMAitQgSMi0jXpUg8hA?view#position-%E5%AE%9A%E4%BD%8D)
- 裝飾性的東西用哪種定位比較好? (絕對定位的特性: 從資料流抽離)
- 哪些資料會放在同一個`div`?
- container和section，`padding`加在哪裡比較好? (如果未來container修改背景色時會有差異)
- 

# 偽類
- 瀏覽器會偵測得到偽類嗎？

## `::before` & `::after`
- 用在`p`標籤時會是inline還是block?
- 使用偽類時content一定要加嗎?不加會發生什麼事?

```htmlmixed
  <style>
    p {
      padding: 20px;
      background-color: #ccc;
      font-size: 30px;
    }
    p::before{
      content: "before";
      color: red;
    }
    p::after{
      content: "after";
      color: yellow;
    }

  </style>
</head>
<body>
  <p>amos</p>
</body>

```

# 首行縮排效果

## text-indent
首行縮排效果
[text-indent](https://blog.xuite.net/vexed/tech/29345696-CSS+%E5%B1%AC%E6%80%A7+text-indent)

## 用定位處理
另一種寫法
讓`點點`做絕對定位（從資料流抽離）
p 做相對定位

# 紅線

重點:
`first-child()`

父層`display: flex`，子層`flex-grow: 1` 
決定父層剩餘空間全部分配給子層
(因為可能未來會加字)
[flex grow複習](https://hackmd.io/bd9SMAitQgSMi0jXpUg8hA?view#flex-grow)

# 交錯

只要一個class就可以寫完的方法? `nth-child(even)`

# 格線

- 畫面分隔成幾欄?
- 巢狀隔線會出現什麼問題？
- 為何要設定 `margin: -15px` 以及 `box-sizing: border-box`？
- 設定 `row` 的目的為？(`col` 排列、消除 `padding`)

# RWD

整理`col-`重複的程式碼，需要用什麼選取器？

- 四種尺寸：
    - 手機
    - 平板直向(md 768)
    - 平板橫向(lg 992)
    - 桌機(xl 1200)


Eg. 使用媒體查詢 `@media`

```
    - 手機 1欄
    - 平板直向(md 768) 2欄 => md-6
    - 平板橫向(lg 992) 3欄 => lg-4
    - 桌機(xl 1200) 6欄   => xl-2
```

# 嵌入影片
等比例縮放的區塊
- iframe 的尺寸問題？(embed 進來的網頁無法撐開區塊)
- padding-bottem比例的計算方式? (父層寬度的50%)

```css
.mv {
  width: 100%;
  /* 這邊寬度為何設定 100%？ */
  /* 思考一下父層的尺寸 */
  padding-bottom: 56.25%;
  /* padding-bottom 的比例是從哪裡的尺寸算出來的？ */
  position: relative;
}
.mv iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  /* 如果沒設絕對定位會如何？ */
}
```