本文章主要讨论 ** 当我们拿到一个页面时,我们怎么用 CSS 完成这个页面**
先弄清楚布局
当我们拿到一个页面时,我们首先得搞清楚这个页面从大的部分可以分成几个 div ,这几个大的 div 的位置是怎样的,例如:
简书的首页,我们便可以将这个页面分为三个大的 div
- 最左边的黑色的那一块的图标列表
- 中间的那个图片
- 右边的正文那一部分
所以这个时候我们可以先完成这部分,即先将整个页面分为这三部分。* 这个时候我们需要考虑一下自适应 。*
定位某个元素
当我们分出 div 后,我们就开始完成其中具体的 元素,这个时候就涉及一个问题,如何给某个具体的 元素定位?
在给具体的元素定位时,我们有以下元素
float
用法
这里面有一个概念,叫 ** 文档流 ,它指的是所谓的文档流实际上是一种民间说法,正常称谓应该指的是常规流(normal flow)**,个人感觉这两者应该是“阀值”与“阈值”的关系。从直观上理解正常流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下,一行接一行,每一行从左至右。position
这个属性共有三个值 absolute,relative,fixed,static
overflow
确定具体位置
- 使用 margin,padding 来给某个元素确定具体位置(当某个元素份的具体位置既可以用 margin,padding设置时,推荐大家用margin,不用padding)
- 盒子模型
设置元素的样式
接下来我们就可以给元素设置样式,包括,颜色,字体,边框,等等
在这个环节大家一定要认真观察这整个页面的每一个元素的样式,你会发现其实有很多的元素他们的样式是一样或者相似的,这个时候我们就可以共用他们的样式,而不用写那么多余的代码。
在这里,推荐大家用 less 文件来写 css 样式,less 文件的好处看这里:http://lesscss.org/
按照上面这种思路,相信当大家拿到一个页面时,就会有一定的思路去完成这个页面,而不会没有思路,乱调样式了。