文：孙飞白

　　题记：

　　QQ上有个朋友问我，说怎么快速学习下DIV+CSS，因为工作需要，必须了解，所以我就写下这个文字。

　　HTML语言几乎是互联网职位都会接触到的一种技能，比如SEO、前端、以及后端都要用到，就连弄个 　　我学HTML的时候，也看过很多的神作，都是什么基本的讲起，没有从系统上给初学者一个大致的学习框架，而是直接的给细节，导致只知点，而不知面，结果一个坑一个坑的“仆”，可能仆多了，于是也有了些心得，那就分享下，写篇入门的给新人学习DIV+CSS的“小白”。高手就直接忽略吧。

　　一、DIV+CSS的渊源

　　年之前，做网站布局，常用的是TABLE，也就是表格，常用的软件叫做：“dreamweaver”,简称DW，网页制作三剑客之一，链接访问样式等那个东西叫CSS。

　　大概是在-左右，国内有些网站开始用div+css方式改版，不过那个阶段使用绝对定位布局方式的居多，也就是DW拖拽出来带有绝对定位属性的div。

　　DIV+CSS后来就称之为“网页重构”。估计有一些网民应该有点印象，那个时候访问网站发现，用不同的浏览器来进行浏览网站的时候，有的是变形的，有的是正常。这就是学DIV+CSS碰到最棘手的问题：兼容问题。特别是在IE6浏览器下，折腾WEB前端最痛苦。

　　不过先说下，单纯的DIV+CSS兼容IE6并不难，只有几个重要的几个点，把兼容搞得很复杂的，那是没有真正明白原理性，所以觉得麻烦。现在IE6也成了昨日黄花，不必再顾忌了。

　　二、DIV+CSS的基本概念

　　DIV+CSS的基本概念不多，列举出来无非是如下几个点：

　　1、盒子模型

　　盒子模型，是学好DIV+CSS最基本的东西，如果你对盒子模型理解不透的话，那么你就会碰到很多的问题，都是因为没有透彻理解盒子模型，特别是兼容问题，那会让你想死的心都有，因为你写的前端代码，在这个浏览器是正常，换个浏览器就不正常了。

图片来源于网络

　　盒子模型在网络上的解说的原理比较多，你可以随便查一下就有知道了。你只要记住一句话，任何一个元素就是一个盒子，其中你最需要理解清楚的就是盒子的margin值以及padding值是如何定义的?从那里开始，到那里结束。

　　至于是层层嵌套的盒子，你记得从最外层的盒子开始控制，逐层控制，这样绝对不会出错。

　　2、元素、属性、值

　　在HTML里面，整个页面就是一个document，叫做文档对象模型，就是一个树形的结构，请大家可以去查一下，大概知道一个HTML页面代码是如何呈现的，这个只要稍做理解就行。

图片来源于网络

　　什么叫做元素?

　　元素就是这个document文档的每一个节点标记，比如body元素，那么我们可以在document中找到，再比如P元素，也是其中的一个节点。我们这里要注意的是每一个元素有他的定义，这个可能需要熟练和记忆?

　　但是我们要说的记忆，不是叫做死记硬背下来，而是熟能生巧记下来，换句话说，其实写多了就记得了，那么我们初期不记得这么多的元素怎么办，直接去搜索一下”HTML”关键字，那么你就可以看到关于所有元素的基本定义，比如P元素，表示段落，H系列叫做标题，UL表示无序列表，DL叫做自定义列表，OL叫做有序列表。这些也不是我记下来的，而是写了很多之后，就知道了。

　　什么叫做属性?

　　元属的个性化就叫做属性，比如人有身高，体重，肥瘦，所以，每个具体的元素也有自己的属性值，但是你会发现，元素的属性每个元素都有，而有些是特定的，比如P有width(宽度),height(高度),float(浮动)，color(颜色)，那个DIV这个元素也有，H系列属性也有，所以，我们也不用去记，而是实际运用的时候去熟练它，再加搜索引擎的配合教学，你很快就会掌握了属性是什么?

　　提点小技巧，我们可以用DW或者其他的IDE工具的提示功能，虽然那些属性值是一个个的英文，但是我们很快就会认识的。

　　什么叫值呢?

　　就是元素属性的表现的参考标数数字。比如一个P元素字体颜色是蓝色，那么我们的代码是什么呢?

比如这个：P{color：#ffffff；}，表示P元素，颜色是白色。#ffffff是白色的16进制值。（注意，分隔符是半角值，在这里我只是为了展示容易看，写成了全角）

　　看这段代码就很清楚了，元素是P，属性和值是在{｝里面的，其中的属性和值之间的间隔是：,以;号进行结束，前面的是元素的属性，后面的是值。格式就是这样。

　　还是那句话，这些属性有什么值，是什么样的值，不要去记，当你写多的时候，很快都会记下来的。

　　3、浮动与定位

　　浮动和定位是DIV+CSS里最难理解的一部份，因为这个要结盒盒子模型了解，也是最容易出问题的地方。

　　定位是指以一个元素在HTML文档空间里的位置，使用position属性值，定位值有好几个，但是这3个必须知道的，absolute(绝对定位)，fixed(固定定位)。Relative(相对定位)

　　绝对定位，一个元素根据top,left,right,bottom值绝对位置。实际案例比如管理员后台，里面的内容要在一屏之内，左边固定，右边无论内容多少，都必须在一屏之内呈现。

　　固定定位，一个元素根据top,left,right,bottom值确定位置，但是不管页面如何变化，此元素固定在一个位置并且不受其他元素的的影响，都在这里出现。常见的设计应用就是悬浮客服类效果。

　　相对定位，就是两个元素相对的位置。但其中相对定位有一个坑就是，当有两个元素，并且形成相互嵌套的时候，那么定位在没有声明的情况下，默认继承父元素所在的位置。

　　事实上，这些都是配合在一起使用的。

　　浮动就是解决元素左右方向的停靠问题，只有left还是right。浮动是兼容产生最大问题的罪恶祸首，几乎在IE6上80%的兼容都在于此。有3点小注意提醒下：

　　A、当一个元素采用了定位(position)之后，此元素的浮动是无效的。定位优先级别大于浮动。

　　B、尽量少用相对定位，因为这个最容易出错，而是采用外部用绝对定位布局，里面具体的元素用浮动，这个方案我比较常用，个人认为有利于解决兼容问题，特别在IE6中。

　　C、如果要采用浮动，请习惯性在该元素加上display:inline;这么一句，可以有效的解决在IE6下进行浮动，当产生边距时会加倍的BUG.

　　三、DIV+CSS的写法注意点及提升

　　DIV+CSS语法结构就不说了，太简单，随便百度一下就知道。

　　所以找几个效果图，写几次，熟就能生巧。最多一个星期就学会了。但是如何把代码写到至简，那就需要你多练习，然后再提升，进行优化代码。我说自己感悟的一些原则问题：

　　DIV+CSS的写法原则是：

　　进行布局的，也就是要用到元素的，都在前端展示。要控制元素属性的，全部放在CSS里面，进行关联就是CLASS类名。但是有些特殊效果可能要把部份CSS代码写在前端。这个灵活处理。

　　写前端约定俗成的，使用CLASS类名，尽量不要用ID，ID给程序员使用。因为CLASS可以重名，而ID不可重名，唯一值，利于程序控制。比如一个DIV元素。

　　DIV+CSS的写法注意点：注意元素的语义性、规范化、简洁性。

语义性是指元素的定义，前面说过，P表示段落，UL表示无序列表，OL叫做有序列表。该用什么就用什么元素，现在目前绝大多数的网站在语义性这块是乱写的，但是不影响实际的表现效果，所以很多人不在意。

规范化，是指元素的不要胡乱嵌套，比如很多在UL的LI里面嵌套DIV，P里面嵌套DIV等等。其实这是不理解document所致，反正也不报错，无所谓。

简洁性，这其实是DIV+CSS的最终效果，而上面两点如果不能明确的话，简洁性是无从谈起的。

　　我写个案例，同样的一个排版效果。你觉得那个写法比较直观一些?

　　原网站实现效果图：

　　我写的代码：

　　原网站实现的代码：

　　你把这个效果能轻而易举的写出来，你对DIV+CSS那么应付常规绝对不成问题。