CSS布局—UI划分区域

CSS 布局就像搭积木一样，实现不难。但是写的注意一些结构，可以减少返工的可能。
给UI页面分域，从大到小 可以分为：块、块里面

一、给UI图分区域：给UI图分区域，分的好，是非常利于CSS布局的。

　　从大到小可以分为，横块，子块，项。

• 横块：UI基本都是从上到下，分区域的内容。
• 子块：横块内部的区域，可能是左右结构的，有可能是上下结构的。
• 项：这个算是比较小的区域了，基本就是一个功能结构了，如文字、图标、表单等

二、对上面划分的区域，实用css的经验总结：

• 横块之间的距离，不要使用margin。而应该使用横块内部自己的padding来实现。
  因为，如果body有背景色。两个横块之间使用margin，margin挤出来的空间就会显现body的背景色。
  另外如果有margin，再复制这块代码块时。也会因为有margin，导致结构需要另外调整。
• 子块中 第一个元素，不要使用margin-top。因为第一个元素效果会变成外面元素的margin。