最近，如何正確地理解和還原 UI 設計稿是一個令人頭大的事兒，前端開發有很多困擾。我們梳理了一下 BUG 列表，發現目前的 CSS 控制做成了一個首鼠兩端的尷尬事兒，捉肘見襟，不應該是這個樣子的。
OK，讓我們還是從基礎開始，再逐步深入；有一個正確的姿勢，很重要！
盒模型
padding 和 margin 是透明的
，
width & height
- padding 負責清理內容周邊；
- margin 負責清理邊框外圍；用于將本元素和其相鄰元素分隔開；
注意 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； - 當 內容區 有 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；
關于 line-height
-
<number> 指定 font-size 的倍數，是推薦用法；
Examples
2016 回顧
- 03月，前端構建 gulp；
- 06月，前端結構 v3；
- 11月，后端引入 Lavarel；
10月，后端 Yii2 引入 Advanced Project Template；
2017 展望
- 01月，前端 CSS；@sarry；
CSS 的邏輯性遠比之前所想高得多，頁面呈現遠非易事！ - ？月，前端框架；
