iT邦幫忙

鐵人檔案

第 11 屆 iT 邦幫忙鐵人賽
回列表
自我挑戰組

前端新手進化史 系列

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

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

前端新手進化史 - 前傳

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

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

大角頭 inline

版面是由各個元素所組成,所以切版前先來跟 html 元素中的兩大角頭拜一下碼頭吧! html 中的元素在預設下大致可劃分為二大類: inline elem...

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

大 角頭 block

在上一篇 大角頭1號 - inline元素 中,已經向 inline 元素拜過碼頭,接下來就是 block 元素了!二大角頭各有自己的脾氣特性! 前情提要...

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

基礎 box model (上)

想像每個元素都是一個盒子,<html> 像是個超級大盒子,裡面裝著各式各樣的盒子,盒子又可以裝盒子,一個版面正是由許許多多的盒子所構成。box m...

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

基礎 box model (下)

在上一篇文章 基礎 box model (上) 中,認識了 box model 的長相,這篇將來看看 box model 的身材。 在進入正題前,先快速複...

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

Collapsing margins

奇怪,明明給定了 margin ,場面卻一直失控? 來了解一下 Collapsing margins 吧! 一、什麼是 Collapsing margins...

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

混血兒 inline-block

inline-block 就像是 HTML 中 inline 和 block 兩大角頭聯姻下的產物,來看看他遺傳了哪些優良的顯性基因吧! 首先,該如何召...

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

text-align

text-align 到底能控制哪些東西呢? 上一篇文章中提到 display 屬性分成內部顯示與外部顯示,設定 display: inline-block,...

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

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

box-shadow 通常像是個可有可無的角色,但其實他也可以變出好玩的花樣,在展現影分身之術前,還是先來打個基本功,熟悉一下 box-shadow 的特性吧...

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

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

咦,box-shadow 和 box model 唸起來很像? 他們的確有關聯沒錯! 還記得 box model 是由四個部分:內容區(content)、內距...

2019-09-25 ‧ 由 yachen 分享