Selector

• class / ID / tag
• attribute selector
• pseudo class
• pseudo element

先等等

讓我們先看看其他的部份

Selector

易懂難精

效能排序

1. ID (#id)
2. Class (.class)
3. Type (即HTML標籤,如div)
4. 鄰接選擇器 (如: h2+p，僅作用於鄰接h2的p元素)
5. Child (如: li>ul)
6. Descendant (如:ul a)
7. Universal (*)
8. 屬性 (如: [type="text"])
9. 摸擬類別/元素 (如: a:hover)

但效能通常不是第一優先考量的點

 權重

神圖必看

維護性

撰寫CSS最優先考量的重點

CSS 排版

記個口訣：

• 全部都是方塊
• 推擠跟堆疊
• 找到原點

全部都是方塊

再複雜的構圖都是由方塊組成

推擠跟堆疊

找到原點

CSS Position

CSS rules

背單字的時間到了

• W3C school
• GOOGLE

• CSS tricks
• CSS award

最佳好夥伴： Can I Use

時間有限

動手>動嘴

Time Limit: 5 min

Position

​決定推擠跟堆疊方式

改變原點

• static
• relative

--- 漂浮分隔線 ---

• absolute
• fixed

還有又愛又恨的 float

Display

​幫『方塊』轉職

• block
• inline
• inline-block
• none

其實還有，但我們不急於一時

Box model

前端面試必考題

重點是弄懂原理！

排版能力 ＝ 原理＋經驗

以及大量的閱讀新知

身為一個全端工程師

腦容量是很寶貴的

Margin

其實你不懂她

margin: 0 auto

超好用

那margin: auto 呢？

前面遇到的問題

為什麼margin 有時候會融合？

Margin Collapsing

這不是BUG，是FEATURE

1. 非文檔流的方向不會摺疊
2. 脫離文檔流的元素不會有摺疊
3. 非Block 元素不會摺疊
4. 父子有了間隙就不會摺疊

致中置中

奇技淫巧

絕對定位法

行高center法

文字

中文字體

請多支持中文WEB FONTS發展計畫

文字很難搞

content 是網頁的核心

但也最不可控

設計的五種狀態

別奢望會有五張圖給你

知道會遇到怎樣的挑戰

比知道一堆語法重要