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

2017-01-12 本文已影响49人 michael_jia

最近，如何正确地理解和还原 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；

Inline style attributes,
ID selectors,
Class selectors,
Element selectors,