本文章主要讨论 ** 当我们拿到一个页面时，我们怎么用 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/
按照上面这种思路，相信当大家拿到一个页面时，就会有一定的思路去完成这个页面，而不会没有思路，乱调样式了。
网友评论