在《编写高质量代码 Web前端开发修炼之道》一书中，作者总结经验，认为网页设计中，css应当分为三层，分别为base层、common层、page层。其中base层为样式最底层，里面包含css reset代码和原子类，基本不需要维护。common层是中层的样式，设置一个网站频道等的样式。page层，则是具体页面的样式。如果把网页设计比作盖房子，base层就是地基，common层就是你这个房子的墙壁、结构，page层就是你房子的内饰等。

之前，潜行者m已经写过一篇关于css reset的文章，而今天，潜行者m就来介绍一下原子类。

原子类是可以高度重用的css样式。例如width:10px;或者是float:left;这类样式，很多的元素都要用到这类样式，但是在每个元素的css样式中，都添加这条语句，无疑会增加代码数量，使其不够简洁，而且当css样式很多的时候，维护起来就会非常麻烦。于是就有了css通用原子类。

如何编写？

在css文件中，编写简单简洁的类，每个类实现一个具体的小功能，并且命名一个非常简单直观的名字，例如：

.w{width:auto;}

.w10{width:10px;}

.fl{float:left;}

.fr{float:right;}

…………

在上面，只写了几个样式，作为例子，实际的原子类文件中，会包含各种原子类。

如何使用？

编写完成之后，我们应该如何在元素中，使用原子类？这就要用到元素的class属性了。在一个页面元素中，class属性值可以重复，并且可以指定多个样式。例如，我想要让这个div元素，宽度为10px，并且向左浮动，那么我就可以这样写：

<div class=”w10 fl”></div>

这样写之后，就说明这个div元素，同时具有.w10 .fl两个类的css样式。而如果我想要另一个div元素，宽度10px，并且向右浮动，我们就可以这样写：

<div class=”w10 fr”></div>

而不必为每个div分别制定width:10px;，这样就可以节约代码，高度重用代码了。同时，简短形象的名字，也可以让人非常容易理解样式的意思，例如一个div的class属性是w100 h100 fl，我们就可以知道，这个div宽100px，高100px，向左浮动，日后修改等都是非常方便的。

推荐使用 潜行者m 的 CSS creater 在线生成包含 常用原子类的 CSS 文件。地址：http://lab.qianxingzhem.com/app/csscreater/

article 元素与section 元素是 html5 中新增的两种元素，它们的功能与 div 是一样的，都是用来区分不同区域，它们的使用方法也相似，因此有很多朋友会将其混用。html 5 中之所以新增这两种元素，就是为了更好的描述文档的内容，所以它们之间肯定是有区别的。

article 元素

article 元素代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如：博客中的一篇文章，论坛中的一个帖子或者一段浏览者的评论等。因为article元素是一段独立的内容，所以article元素中，通常包含头部（header元素）、底部（footer元素）。例如博客中的一篇文章的结构：

<article>
    <header>
        <h1>潜行者m的个人介绍</h1>
    </header>
    <p>潜行者m是一个男的中国人。。。。。</p>
    <footer>
        <p>潜行者m版权所有</p>
    </footer>
</article>

section 元素

section 元素用于对网站或者应用程序中页面上的内容进行分块。一个 section 元素通常由内容以及标题组成。例如：

<section>
    <h1>潜行者m的个人介绍</h1>
    <p>潜行者m是一个男的中国人。。。。。。</p>
</section>

从上例可以看出，**section 元素中，需要包含一个<hn>标题元素**，而一般不用包含头部（header元素）或者底部（footer元素）。通常用 section 元素为那些有标题的内容进行分段。 section 元素的作用，是对页面上的内容分块处理，例如对文章分段等，相邻的 section 元素的内容，应当是相关的，而不是像 article 那样独立。例如一篇文章：

<article>
    <header>
        <h1>潜行者m喜欢的科技公司</h1>
    </header>
    <p>本文中，潜行者m列举了一下他喜欢的科技公司。。</p>
    <section>
        <h2>google公司</h2>
        <p>著名的搜索引擎公司。。。</p>
    </section>
    <section>
        <h2>苹果公司</h2>
        <p>非常能创新的公司。。</p>
    </section>
    <footer>
        <p>版权所有，翻版不咎</p>
    </footer>
</article>

通过上面的例子，你应该能感受到 article 元素与 section 元素的区别。事实上 article 元素可以看做是特殊的 section 元素。article 元素更强调独立性、完整性，section 更强调相关性。 ## 一个比较完整的例子

<article>
    <header>
         <h1>潜行者m的个人介绍</h1>
    </header>
    <p>潜行者m是一个中国男人，是一个帅哥。。。。</p>
    <section>
        <h2>评论</h2>
        <article>
            <h3>评论者：潜行者n</h3>
            <p>确实，m同学真的很帅</p>
        </article>
        <article>
            <h3>评论者：潜行者a</h3>
            <p>M今天吃药了没？</p>
        </article>
    </section>
</article>

article、section 与 div 的区别

既然 article、section 是用来划分区域的，又是html 5的新元素，那么我可不可以用article、section来取代div，用来布局网页呢？如果你真打算这样做，那么你就像使用ul来打造表格（table）一样愚蠢。div的用处就是用来布局网页，划分大的区域，只是html 4中，只有div、span来划分区域，所以我们就习惯性的把div当成了一个容器。而html 5改变了这个，它让div的工作更纯正。div就是用来布局大块，在不同的内容块中，我们按照需求添加 article、section 等内容块，并且显示其中的内容，这样才是合理的使用这些元素。

最近受到Sami大叔的激励，努力花了一天的功夫，又把博客模板改版了一下，升级了一下，几乎把所有的css代码又重新写了一遍。我发现，实践真的是最好的老师之一，通过实践，可以让你的技术层次更深一步增加。这一次的升级，让我得到了非常多的经验，例如本文要说的。

浏览器都是不同的，解析用的内核也是不同的（这里的浏览器不算360、搜狗等借用其他浏览器内核的浏览器）。这样就出现了不兼容的问题。例如，一行css代码，在这个浏览器可能会正常解析，而在那一个浏览器，却无法解析或者进行了加粗等等。这样就出现了一个很头疼的问题，一个页面，可能在火狐浏览器中显示很好很正常，但是到了IE浏览器下面，却错位，严重影响版面。

面对这个兼容的问题，大多数人都选择了进行修补，但是通过这次，我发现了，这种不兼容的原因，大部分还是因为你编写的css代码上。下面请看潜行者m在升级模板的时候，发现的两个案例：

1，显示文章摘要的框，在火狐浏览器等都是正常的，而在IE浏览器中，却莫名的增高了。重写css代码的时候，发现，在定义文章摘要框的时候，由于演示边框效果，临时定义了高160px。在整个定义整个文章框的时候，又强制定义了高度，由于类的优先性，这样就把文章摘要框的过高部分截掉了。所以就忽视了当时临时定义的高度属性。在火狐等浏览器中，都正常解释。但是在IE早期的版本，可能无法处理这种叠加效果，所以就全部显示出来了。导致每一个文章框的高度都很高。问题的解决方法，删掉对于文章摘要框的高度定义即可。

2，当我设计完这套模板的时候，在其他浏览器中均显示正常，但是在IE5.5和IE6中的“文章模块”显示中，边栏却错位。在“页面模块”显示中，却没有错位。由于“页面模块”是由“文章模块”衍生出来的，肯定是“文章模块”中某个地方的原因，导致边栏错位。经过仔细的对比观察发现，在文章下面的“文章信息”这一个块中，由于添加了两个虚线，导致整体宽度是642px，而文章内容是640px。正是由于多出了这2px的宽度，把边栏挤下去了。修改方法，设置“文档信息”的宽度为638px。

通过这两个例子，不得不让我思考，网页错位等原因，究竟是什么造成的？很显然，是由不完善的css代码造成的，是人为造成的。浏览器确实针对某些css样式的解释不同，显示的效果不同。但是绝大多数浏览器对于基础的css样式解释是没有问题的，比如：width:900px;绝对没有一个浏览器会把这条语句中的900px的宽度，显示成1000px的宽度。所以说，对于常用的常见的css样式规则，浏览器全部都完美支持，只是有部分比较生僻的标签样式或者某些高级的样式应用技巧，对于某些比较旧的浏览器来说，显示不出来应有的效果，仅此而已。所以，如果你的网页中，出现了不应该出现的显示效果，请仔细检查你的css代码，看看是不是有一些低级的错误。

对于一个人编写的css样式表来说，这种错误会很容易避免，因为css代码比较少，一个人去写，风格也能统一。但是对于一个比较大型的网站，对于一个需要团队共同维护的css样式表来说，麻烦就来了。每个人的编写风格都不同，而且代码很多，出现错误不易检查。所以，本人总结出了几条针对不兼容问题的应对方法：

1，尽量使用最低级，最简单的样式。因为这种基础样式在所有浏览器中的显示效果都是一样的。

2，统一编写风格，细化样式控制，尽量避免在一个区块叠加多个样式，意思就是说，对于一个div或者区域，就用一个样式去控制，不要再添加多个样式，让这个div继承其他样式。这样，哪一个区域出现问题，可以迅速的查找原因，而且不会出现其他继承样式优先级等导致的意外情况。

先来简单的介绍一些 css reset

从字面意思中，我们可以看出，css reset的功能就是把网页标签样式使用 css 重置。学过 html 的朋友都知道，html 标签是有它默认的样式的，例如：<h*>标签表示标题，通常会对文字进行加粗，并且会让文字变大；<p>是段落标签，表示一个段落，通常会与其他文字空开一段距离。

那我们为什么要把网页的标签样式进行重置呢？原因很简单，内核不同的浏览器，它对于网页标签的解析是不同的。举个不恰当的例子，某浏览器对于<h1>标签，可能会对文字进行加粗，并且调整文字大小为24px，之后在屏幕中输出。但是另一个浏览器，可能不会这样解析，它可能不会对文字进行加粗，文字大小也可能是20px。这样，同一个网页，在不同浏览器的浏览下，就会发生较大的区别，可能在某浏览器中是正常的，在另一个浏览器中，就错位了不正常了。潜行者m之前写过比较一篇关于几个主流浏览器的区别，有兴趣的可以看一下 firefox、chrome、opera和IE 7的区别 。

但是，所有的主流浏览器，对于css的支持都是不错的，所以我们可以使用css reset来解决上面的问题。我们使用css来控制页面标签的样式，比如把<h*>标题的加粗、扩大、边距等样式清除，让它和普通文字一样；把<ul>等列表标签的前面标志、空格等清除。这样，把所有的标签样式清除了，当我们需要某一种样式的时候，只需要在css文件中，对其进行控制即可。这样的好处就是，能够尽量的消除各个浏览器对于页面标签样式的解析，尽量使网页在各个浏览器中显示效果一样。

那么css reset如何编写

目前在网络上，已经有很多关于css reset的框架，例如雅虎的 YUI 等，我们可以下载下来看看他们是怎么写的，是怎么处理的。同时也可以直接在网页中引用。但是对于小的页面，潜行者m并不推荐这种做法，那些大的框架，适合大型网站使用，里面几乎对所有的html标签进行了css reset，而我们制作的小页面，并不需要太多的标签，如果使用那么多无用的css reset代码，会导致页面体积变大。所以我推荐的做法是，根据自己页面用到的标签，去寻找相应的css reset代码。下面，是我从《编写高质量代码—web前端开发修炼之道》一书中，提取出来的一段css reset代码，大家可以根据自己的需要，选择引用：

/CSS reset/
html{color:#000;background:#fff;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,button,textarea,p,blockquote,
th,td{margin:0;padding:0;}table{border-collapse:collapse;
border-spacing:0;}fieldset,img{border:0;}address,caption,
cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;
font-weight:inherit;}del,ins{text-decoration:none;}
li{list-style:none;}caption,th{text-align:left;}h1,h2,
h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,
q:after{content:’’;}abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}sub{vertical-align:baseline;}
legend{color:#000;}input,button,textarea,select,optgroup,
option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}input,button,select,
textarea{outline:none;}a {outline: 0;}

上面就是一段还不错的css reset代码，在文章的后面，我补充了一些css reset资源。

关于*{margin:0;padding:0}

{margin:0;padding:0}这就是一段非常简洁的css reset代码，有一些人仅仅使用这一句代码，表示将所有标签的内边距和外边距清除，达到css reset的效果。但是潜行者m不推荐使用。原因很简单，这一行代码不能算作是css reset代码，它仅仅清除了标签的内边距和外边距而已，而我们要的css reset效果，是要把ol和ul的列表样式、th的加粗、h标签的变大加粗等样式都清除，全部重置。之后，根据自己的设计需要来进行css的控制。而这句{margin:0;padding:0}，没有把所有的样式清除。

PS：补充一个资源 10款浏览器CSS Reset的方法

前些天，制作过几个 html 页面，为了测试网页的兼容度，在电脑里面安装了上面这四个浏览器。之后的一段时间内，我依次用过这四个浏览器。下面，我就把这四个浏览器的体验以及显示效果和大家分享一下。

本文所写的浏览器的版本分别是：firefox 9.0.1、chrome 16.0.912.75 m、opera 11.61 internal 和 IE 7 官方原版无插件。

firefox：

火狐浏览器很早就听说过了，但是一直没有用过。之前潜行者 m 一直使用着世界之窗等 IE 内核的浏览器，现在下载来试用了一下，果然很强大。用过火狐之后，就再也不想使用 IE 了。

火狐浏览器的特点就是功能强大，可扩展性比较强，含有大量插件；观看网页源代码很方便，它的编辑器会进行语法的高亮，而且能观看选中内容的网页源代码等等。

关于火狐浏览器，值得称道的地方有很多，其中最重要就是浏览体现。火狐浏览器解析出来的字体样式很好看，并且进行了适当的加粗，这是其他浏览器做不到的。同时它对于css以及网页布局的解释是比较正确的，基本上 css 代码都能够达到我们预期的效果。

当然它也有很多缺点。1，对于网银等支持不好，无法进行网银等的操作；2，很多功能华而不实，特别是图片收藏功能。这可能是潜行者 m 个人的习惯，对于一个图片，我会拖动它，想要让它在一个浏览器的新窗口打开以便观看大图像。但是在火狐浏览器中拖动，它会把图片收藏起来，而且收藏的图片，删除很麻烦。此外，当我拖动一个关键词，是想让它弹出一个新窗口，使用搜索引擎搜索。但是火狐却出来“火狐魔镜”功能，在一个小窗口里面，显示着使用维基、百科、购物等搜索的内容。

总体来说，火狐浏览器在其他几款浏览器中，是比较好的，也是目前本人一直在用的浏览器。

chrome：

谷歌浏览器，太过于简洁。不过简洁，就是他们追求的风格。的确，一个浏览器，最重要的东西就是浏览网页，没有必要有太多的功能。所以，谷歌浏览器，把所有的东西，都集中在了长长的地址栏上面。

这样做有好处，也有缺点。好处就是方便了人们的操作，直接在浏览器输入地址，或者要搜索的关键字就可以。缺点就是功能性不强，对于某些喜欢自定义使用风格的朋友来说，无法去定义更多的个人风格。

谷歌浏览器的技术确实很好，特别是它创造的，每个页面开启一个浏览器进程，如果某页面崩溃，可以防止影响其他页面。但是我并不赞同，谷歌浏览器浏览速度要比其他浏览器快。因为，浏览器的访问速度与两方面有关，第一个就是网速，第二个就是浏览器的执行速度等。目前主流的浏览器，使用的技术差不多都是一样的，所以在浏览器方面，速度的快慢，区别不大。如果你感觉它的速度快，可能是因为它界面太过于简洁，给人的一种心理感觉。

谷歌浏览器对于css等的解析也是比较正常的，基本上都能达到预想的效果。显示效果也中规中矩的。

opera：

我在手机上经常使用这个浏览器，手机上的欧朋浏览器，比 UC 要好用的多。但是电脑版的，稍微差点。

它的功能不差，提供了很多创新性的功能，例如笔记本功能，我们可以把网页中的文本内容等，复制到临时笔记本中。但是它比较致命的缺点，还是解析能力不强。我们在使用 opera 的时候，经常能够发现很多错误，例如下面的

这是正常的收款主页，但是在 opera 中，却显示成这样

如果不严格的使用css等进行控制，它总是会显示出不友好的界面，这才是最致命的问题。此外，它和火狐浏览器是“亲兄弟”，不知道是谁模仿的谁。自从谷歌浏览器出来之后，它的把网页标题加在了最上方的标题栏上的设计，被一再模仿，现在你已经找不到哪个浏览器不把网页标题放在最上面了。

它的显示效果，也是中规中矩的。

IE：

最后，是我不想提但又不能不提的一个浏览器。IE 浏览器，由于绑定了 windows，有很多人在使用。由于它的难用，导致出现了大量的第三方浏览器（例如：遨游、世界之窗、搜狗等），使用它的内核来解析网页，剥去了它的外皮。针对 IE 的漏洞和攻击层出不穷。这还不是主要的，对于一个用户来说，倒是无所谓，但是对于一个网页设计师来说，IE 浏览器可能会让他崩溃。

IE 的解析能力实在是太弱了，而且与其他浏览器不同。所以在设计网页时，必须围绕着 IE 来进行单独的设计。就拿本人目前使用的模板（qxzm 0.95）来说，当时我制作完成了，在火狐、谷歌、欧朋浏览器中测试全部通过。之后准备发布，结果想起了还没有用 IE 测试，结果用 IE7 一看，页面内容惨不忍睹，没有居中，全部左对齐了。后来不得不用 css hack 技术，对 IE 单独编写了几行 css 代码，才让它勉强显示出了需要的效果。

但是 IE 却是必不可少的东西，只有它才能完美的支持网银以及一些操作，而且它的用户量非常大，不能不关注它。