--- 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; /* 如果沒設絕對定位會如何？ */ } ```