DIV+CSS网页重构学习教程

第一部分：学习并清晰了解各个标记功能作用。
注：勤动手才会有一个更加印象深刻的了解。
DIV+CSS网页重构所使用到的标记并不是很多。以下我将例出常使用的大部份标记：div、h1、h2、h3、p、a、table常使用的就只有这么几个，这些是定制网页页面格式的，所以记起来也并不麻烦吧。还有另一些是如换行<br />，显示图片<img src=”img.jpg” />，还是显示flash的就不介绍了，这些只需要做过一次就能清楚了解的了。
1、div：div也就是我们所说的层了。
网页在拆分开来后就是一个个具体的层，而由各个层按各种顺序组合起来后，就成了一个漂亮的页面了。
以下介绍一下主要应用于div层中的CSS：
Width：宽度，一般以象素px为单位，用作于设置DIV层的宽度。不设置则默认继承父容器（可能是DIV也可能是Table或列表LI等）的宽度。
Height：高度，也是以象素px为单位，用作于设置DIV屋的高度。不设置，在没有内容的情况下，在IE中则默认为行高，在Firfox等默认为零（0）；如果有内容，那么就以内容的高度为准（在Firfox等非IE浏览器中，需设置float:left）。
Float：跟随，可以设置left或right。Left向左跟随，那么内容向左对齐。Right则相反，向右跟随，内容向右对齐。
Line-height：针对设置DIV内的文本内容的行高，以象素px为单位，也可以使用百分比为单位，如150%；
Position：static、relative、absolute、fixed；
A.static：定位就是不定位，出现在哪里就显示在哪里，这是默认取值。
B.relative：是相对定位，它是相对元素static定位时的位置进行偏移，如果指定static时top是50象素，那么指定relative并指定top是10象素时，元素实际top就是60象素了。
C.absolute：绝对定位，直接指定top、right、bottom、left。有意思的是绝对定位也是“相对”的。它的坐标是相对其父容器来说的。只有当父容器Position 设置为absolute或fixed或relative。 如果父容器没有设置，那么就是使用浏览器初始的，也就是body或者html元素。
D.fixed：也是绝对定位，但这个绝对定位是相对于浏览器来说的。
这四个属性从使用率来说，使用得最多就是默认的static，然后就是absolute。Absolute常用于需要定位界面中的某个特定位置或者将该设置为Absolute的层定位于另一个层上面，如果设置为叠加在另一个层的上面，最好设置一下z-index的值，值越高，就显示越前。
Margin：是设置层距离父容器的边距的值，以top、right、bottom、left上右下左这个顺序的距离值，以空格分开，以象素px为单位。细分下来有margin-top、margin-right、margin-bottom、margin-left四个。例如：margin:16px 10px 0 18px;这样就设置这个div层距离父容器上16px、右10px、下0、左18px；
Padding：是设置屋的内容距离层的边框的距离值，以top、right、bottom、left的顺序设置。细分依旧有padding-top、padding-right、padding-bottom、padding-left这四个。举例：padding:21px 0 0 12px;这个例子是设置了层的内容距离层的边框的距离为上21px，右和下都为0，左为12px。

Border：这个是设置层的边框属性。这个属性可以设置的参数有很多，具体的请自己查查CSS的书籍。现在举一个较常用的例子，如border:solid 1px #000000;solid是实线边框，边框粗细为1px，颜色为#000000黑色值。
在DIV中常用的属性就只有这么多。再进一步学习需要靠自己的努力了。