大数据

第二期之 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/

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