最近集晚，如何正確地理解和還原 UI 設(shè)計稿是一個令人頭大的事兒，前端開發(fā)有很多困擾坎拐。我們梳理了一下 BUG 列表担忧，發(fā)現(xiàn)目前的 CSS 控制做成了一個首鼠兩端的尷尬事兒芹缔，捉肘見襟，不應(yīng)該是這個樣子的涵妥。
OK乖菱，讓我們還是從基礎(chǔ)開始，再逐步深入蓬网；有一個正確的姿勢窒所，很重要！
盒模型
padding 和 margin 是透明的
帆锋，
width & height
- padding 負責(zé)清理內(nèi)容周邊吵取；
- margin 負責(zé)清理邊框外圍；用于將本元素和其相鄰元素分隔開锯厢；
注意 margin collapsing（margin 折疊）問題皮官； - 一個元素的 width 和 height 屬性脯倒，只是 Content 的寬高；整個元素的尺寸捺氢，還要加上 Padding藻丢、Border 和 Margin；
total box width = content area width + left padding + right padding + left border + right border + left margin + right margin摄乒； - 當(dāng) 內(nèi)容區(qū) 有 background悠反，color，image 時馍佑，會擴展到 padding斋否，所以 padding 可以說是 content 的擴展；
- css tutorial in w3schools拭荤；
- MDN: Introduction to the CSS box model茵臭；
- Box model - W3C；
- The CSS layout model - W3C舅世；
- Opening the Box Model旦委；
渲染原理（rendering principles）
- The Cascade
- Inheritance
- Specificity
relative specificity of a given rule:
Inline style attributes,
ID selectors,
Class selectors,
Element selectors,
CSS Syntax
CSS Syntax
- Troubleshooting css rendering problems cascading style sheets inheritance specificity；
- CSS How To: Three Ways to Insert CSS & Cascading Order歇终；
關(guān)于 line-height
-
<number> 指定 font-size 的倍數(shù)社证，是推薦用法；
Examples
2016 回顧
- 03月评凝，前端構(gòu)建 gulp；
- 06月腺律，前端結(jié)構(gòu) v3奕短；
- 11月，后端引入 Lavarel匀钧；
10月翎碑，后端 Yii2 引入 Advanced Project Template；
2017 展望
- 01月之斯，前端 CSS日杈；@sarry；
CSS 的邏輯性遠比之前所想高得多佑刷，頁面呈現(xiàn)遠非易事莉擒！ - ？月瘫絮，前端框架涨冀；
