页面设计布局和盒模型（box model）

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