最近，如何正確地理解和還原 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 的邏輯性遠比之前所想高得多，頁面呈現遠非易事！
• ？月，前端框架；