第二期之 CSS

本文章主要讨论 ** 当我们拿到一个页面时，我们怎么用 CSS 完成这个页面**

先弄清楚布局

当我们拿到一个页面时，我们首先得搞清楚这个页面从大的部分可以分成几个 div ，这几个大的 div 的位置是怎样的，例如：

jianshu

简书的首页，我们便可以将这个页面分为三个大的 div

• 最左边的黑色的那一块的图标列表
• 中间的那个图片
• 右边的正文那一部分
  所以这个时候我们可以先完成这部分，即先将整个页面分为这三部分。* 这个时候我们需要考虑一下自适应 。*

定位某个元素

当我们分出 div 后，我们就开始完成其中具体的 元素，这个时候就涉及一个问题，如何给某个具体的 元素定位？

在给具体的元素定位时，我们有以下元素

• float

• 用法
  这里面有一个概念，叫 ** 文档流 ，它指的是所谓的文档流实际上是一种民间说法，正常称谓应该指的是常规流（normal flow）**，个人感觉这两者应该是“阀值”与“阈值”的关系。从直观上理解正常流指的是元素按照其在 HTML 中的位置顺序决定排布的过程，主要的形式是自上而下，一行接一行，每一行从左至右。

• position

• 这个属性共有三个值 absolute，relative，fixed，static

• 用法

• overflow

• 用法

确定具体位置

• 使用 margin，padding 来给某个元素确定具体位置（当某个元素份的具体位置既可以用 margin，padding设置时，推荐大家用margin，不用padding）
• 盒子模型

设置元素的样式

接下来我们就可以给元素设置样式，包括，颜色，字体，边框，等等

在这个环节大家一定要认真观察这整个页面的每一个元素的样式，你会发现其实有很多的元素他们的样式是一样或者相似的，这个时候我们就可以共用他们的样式，而不用写那么多余的代码。

在这里，推荐大家用 less 文件来写 css 样式，less 文件的好处看这里：http://lesscss.org/

按照上面这种思路，相信当大家拿到一个页面时，就会有一定的思路去完成这个页面，而不会没有思路，乱调样式了。