CSS.pptx
Download as PPTX, PDF0 likes1 view
文档概述了 CSS 的盒子模型、定位和显示属性，包括 padding、margin、position 和 display 的基本用法及其效果。特别提到特定的 CSS 属性如 box-sizing，解释了不同的 position 类型（static、relative、fixed 和 absolute）的区别和应用。还包括 inline、block、inline-block 的展示特性及其注意事项。
CSS.pptx
- 1. CSS Box model, Position, Display
- 3. Padding • 沒有padding，內容會黏著邊框。 • 會撐起Border • 會吃到背景色。
- 6. Margin • 讓element和其他element之間有一定的距離 • 不會吃到背景色。 • Margin Collapsing
- 11. Long Time Ago There was a Front-End Engineer…
- 13. 結果變成這個樣子：
- 15. 這個時候出現問題了！
- 16. 變得超可怕！
- 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
- 28. Inline • 不會換行，只有一行 • 只有margin-bottom, margin-top不行 • 沒有width
- 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
Editor's Notes
- #12: 講完盒子模型了，來講一個很重要的屬性。2006年, 菜鳥小明要自己寫網頁。他寫一個文章列表，就是一個盒子加上圖片和文章標題
- #13: 做了寬400, 高100的東西
- #14: 於是加上padding
- #15: 看似幸福美滿，再繼續寫就能做出設計師要的版型？
- #16: 可以給大家猜猜看 原本width: 400 height: 100的東西就變成這樣了！
- #17: 要解決的話：width: 378px, height: 58
- #19: 那舊的屬性：content-box和border-box有什麼不一樣呢
- #30: 碰到 display : block 元素就是會換行，而 display : block 元素的寬度預設會撐到最大。 display : block 元素不管是 margin 、 padding 、 width 、 height 、 background-image 通通都可以。 要將 display : block 元素水平置中，方法是在此元素加上 margin : 0 auto ， 0 可以取代為任何數字。