iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
自我挑戰組

前端新手進化史 系列

原以為 CSS 是隻小綿羊,某天赫然發現它只是披著羊皮,來看看羊皮下藏的是什麼吧。

鐵人鍊成 | 共 30 篇文章 | 31 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室 v3.0
DAY 1

前端新手進化史 - 前傳

前言 故事是這樣的,本身是畢業於經濟系,在 2019 年 5 月的某一天意外「得知了前端這個名詞」,當時連 CSS 是什麼碗糕都沒聽過,一個禮拜後「決定入坑前端...

2019-09-16 ‧ 由 yachen 分享
DAY 2

大角頭 inline

文章將陸續整理並更新至個人部落格 版面是由各個元素所組成,所以切版前先來跟 html 元素中的兩大角頭拜一下碼頭吧! html 中的元素在預設下大致可劃分...

2019-09-17 ‧ 由 yachen 分享
DAY 3

大 角頭 block

文章將陸續整理並更新至個人部落格 在上一篇 大角頭1號 - inline元素 中,已經向 inline 元素拜過碼頭,接下來就是 block 元素了!二...

2019-09-18 ‧ 由 yachen 分享
DAY 4

基礎 box model (上)

文章將陸續整理並更新至個人部落格。 想像每個元素都是一個盒子,<html> 像是個超級大盒子,裡面裝著各式各樣的盒子,盒子又可以裝盒子,一個...

2019-09-19 ‧ 由 yachen 分享
DAY 5

基礎 box model (下)

文章將陸續整理並更新至個人部落格。 在上一篇文章 基礎 box model (上) 中,認識了 box model 的長相,這篇將來看看 box mod...

2019-09-20 ‧ 由 yachen 分享
DAY 6

Collapsing margins

文章將陸續整理並更新至個人部落格。 一、什麼是 Collapsing margins? 先來看一段 W3C 規範 的敘述: In CSS, the a...

2019-09-21 ‧ 由 yachen 分享
DAY 7

混血兒 inline-block

文章將陸續整理並更新至個人部落格。 inline-block 就像是 HTML 中 inline 和 block 兩大角頭聯姻下的產物,來看看他遺傳了哪...

2019-09-22 ‧ 由 yachen 分享
DAY 8

text-align

文章將陸續整理並更新至個人部落格。 text-align 到底能控制哪些東西呢? 上一篇文章中提到 display 屬性分成內部顯示與外部顯示,設定 d...

2019-09-23 ‧ 由 yachen 分享
DAY 9

番外篇 - 胡搞 box-shadow(上)

文章將陸續整理並更新至個人部落格。 box-shadow 通常像是個可有可無的角色,但其實他也可以變出好玩的花樣,在展現影分身之術前,還是先來打個基本功...

2019-09-24 ‧ 由 yachen 分享
DAY 10

番外篇 - 胡搞 box-shadow (中)

文章將陸續整理並更新至個人部落格。 咦,box-shadow 和 box model 唸起來很像? 他們的確有關聯沒錯!還記得 box model 是由...

2019-09-25 ‧ 由 yachen 分享