iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

欸,貓咪你不能去那裡!CSS新手學習之路 系列

自身還尚未接觸過CSS,所以這是30天自我學習CSS挑戰,挑戰自己在有限時間內能理解多少CSS內容。
30篇中主軸上我會針對與切版相關的CSS技術去做深入討論,尤其是排版相關內容會佔多數,例如:flexblock 以及 Grid,另外少量穿插一些與切版有些相關、我認為值得補充學習的知識。

參賽天數 23 天 | 共 23 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室 v 9.0
DAY 11

【Day 11】Position 與 containing block理了還是亂的關係

前言 接續昨天討論,今天來探討containing block如何影響position屬性,或者說是position屬性如何影響containing block...

2025-09-25 ‧ 由 Jean.K 分享
DAY 12

【Day 12】這裡overflow是溢出屬性不是溢流

前言 CSS 2.2規範裡containing block一文有提到溢出(overflow)這一詞;而在『CSS大全』定位章節裡同時也有一篇專門介紹溢出。就像裝...

2025-09-26 ‧ 由 Jean.K 分享
DAY 13

【Day 13】回頭重新學習 - display

前言 在【Day 05】時候有稍微提到display屬性,但接下來介紹flexobox前我想還是重新理解一遍display對佈局的影響。 display是什麼?...

2025-09-27 ‧ 由 Jean.K 分享
DAY 14

【Day 14】Flexbox 基本概念

前言 經過幾天的基礎打底,前面的鋪陳是為了接下來能更順利地進階到flexbox,事不宜遲就直接開始吧! 介紹 CSS Flexible Box Module L...

2025-09-28 ‧ 由 Jean.K 分享
DAY 15

【Day 15】Flexbox基本概念 續

前言 昨天說了Flexbox基本排列概念,但還有flex容器的基本概念還沒討論,今天繼續來討論Flex Container吧! 首先設定display吧 Fle...

2025-09-29 ‧ 由 Jean.K 分享
DAY 16

【Day 16】flex-direction & flex-wrap屬性值介紹

前言 接下來來詳細介紹 Flex Container 的屬性吧!讀下來發現每個屬性都牽涉很多,所以我會分成幾篇來詳細介紹它們。 Flex Container 屬...

2025-09-30 ‧ 由 Jean.K 分享
DAY 17

【Day 17】Flex-flow與軸向原產地

前言 繼續昨天討論,今天來講Flex Container其他屬性吧。 Flex Container 主要屬性: 屬性 說明 flex-flow f...

2025-10-01 ‧ 由 Jean.K 分享
DAY 18

【Day 18】在justify-content之前來聊聊CSS對齊

前言 今天來介紹justify-content屬性,在開始介紹之前我先插個話題,來聊聊justify這一詞來源。 justify與對齊的故事 這段與程式碼無關,...

2025-10-02 ‧ 由 Jean.K 分享
DAY 19

【Day 19】詳解justify-content屬性值

前言 今天可以切回正題了,回來繼續討論justify-content。 Flex Container 主要屬性: 屬性 說明 justify-co...

2025-10-03 ‧ 由 Jean.K 分享
DAY 20

【Day 20】詳解align-items屬性值

前言 結束昨天的justify-content,今天繼續探討Flex Container其他主要屬性,來討論align-items吧! Flex Contain...

2025-10-04 ‧ 由 Jean.K 分享