iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

30天搞定CSS及切版 系列

準備轉職前端
在30天內奠定CSS基礎
認識CSS重要屬性、排版
並實現一些小作品~

參賽天數 15 天 | 共 16 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 1

CSS-Model 盒模型

前言 在HTML中每一個元素都會被CSS當作一個矩形盒子,CSS可以更改其寬度、高度、跟其他元素的距離等等的屬性。而每一個矩形盒子都會由四個部分 content...

2021-09-11 ‧ 由 Xuan 分享
DAY 2

display : Inline、Block、Inline-Block

display:Inline、Block、Inline-Block 前言 display是用來設置每個元素的排版方式,每種元素都有預設的display。常見的d...

2021-09-12 ‧ 由 Xuan 分享
DAY 3

偽元素(pseudo element)、偽類別(pseudo element)

偽元素 : Before 、After Before 對指定元素添加最後一個子元素 After 對指定元素添加第一個子元素 必須加上 content 屬性,否則...

2021-09-13 ‧ 由 Xuan 分享
DAY 4

尺寸單位 px、em、rem

前言 在現實生活中,常見的尺寸單位有公分(cm)、公尺(m)、奈米(nm),而在網頁畫面中自己的尺寸單位~用來改變文字大小、元素寬高等等... px (pixe...

2021-09-14 ‧ 由 Xuan 分享
DAY 5

CSS 權重優先級

前言 偶爾寫CSS時會發現改了顏色、寬高但沒有任何效果,就有可能是優先級搞出的問題唷。所以搞清楚CSS是如何套用按權重套用樣式也是很重要的~ 主要三種元素套用C...

2021-09-15 ‧ 由 Xuan 分享
DAY 6

CSS選擇器

前言 CSS選擇器可指定你要對那些元素設定CSS屬性。 基本選擇器 Class 選擇器 使用「.」代表選擇CLASS例如要使用class="box1&...

2021-09-16 ‧ 由 Xuan 分享
DAY 7

CSS Position

前言 position 是用來設置元素定位的屬性Position分成了static 、fixed、relative、absolute、stickily stat...

2021-09-17 ‧ 由 Xuan 分享
DAY 8

CSS overflow

前言 當子元素溢出母元素時該如何處理可單指設定X軸或Y軸 overflow-x overflow-y visible 預設。 overflow: visibl...

2021-09-18 ‧ 由 Xuan 分享
DAY 9

CSS animation

前言 CSS可用來製作簡單的動畫,效能會比JS好很多。 屬性 animation-delay 設定動畫讀取完畢再到開始時的延遲時間,有時候不想讓動畫這麼快開始就...

2021-09-19 ‧ 由 Xuan 分享
DAY 10

CSS float

前言 使用float可以讓元素浮起來~原本block會撐滿父元素的寬,現在不會發生了,變得有點像inline-block的樣子,元素開始會水平排列。 floa...

2021-09-20 ‧ 由 Xuan 分享