最近，如何正确地理解和还原 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 的逻辑性远比之前所想高得多，页面呈现远非易事！ - ？月，前端框架；
