css intro

1. CSS
Box model, Position, Display

3. Padding
• 沒有padding，內容會黏著邊框。
• 會撐起Border
• 會吃到背景色。

6. Margin
• 讓element和其他element之間有一定的距離
• 不會吃到背景色。
• Margin Collapsing

9. Another Example
Paragraph和Heading的距離是多少?

11. Long Time Ago
There was a Front-End Engineer…

13. 結果變成這個樣子：

15. 這個時候出現問題了！

16. 變得超可怕！

18. 現在2018，只需要Box-sizing
Box-sizing: border-box

19. content-box vs. border-box

20. Position
static, relative, fixed, absolute etc.

21. Static
• Position的預設值
• 照Browser默認的方式排
• 無法被top, bottom, left, right所影響

23. Relative
• 和 Static 一樣
• 除非你有讓他移動 (left, right, top, bottom)
• 相對的出現在原本應該的位置

25. Fixed
• 固定在Browser視窗
• 脫離一般的排版順序
• Example: Udn的Menu bar，煩人的右下角廣告

26. Absolute
• 和Fixed有87%像
• 不會根據 browser視窗定位，而是用父層定位
• 若要使用，父層要加上position: relative

27. Display
Inline, block, inline-block

28. Inline
• 不會換行，只有一行
• 只有margin-bottom, margin-top不行
• 沒有width

29. Block
• 會把寬度加到最大
• 自動換行

30. Inline-block
• 外面Inline, 裏面block
• 有和Float類似的行爲

31. 但是有問題！

33. Reference
• https://caniuse.com/#search=box-sizing
• https://www.html-seminar.de/box-modell-box-sizing-border-box.htm
• https://ithelp.ithome.com.tw/articles/10194997
• https://stackoverflow.com/questions/19782332/margin-stacks-on-
each-other
• https://wcc723.github.io/css/2016/06/08/css-margin-collapsing/
• http://zh-tw.learnlayout.com/box-model.html