Mikel
在由表格作为架构做网站到DIV架构,这段时间碰到的问题不少,在这里总结一下,以备不时之需.
用DIV+CSS架构网站以来,用到的标签无非就是以下几个:DIV、UL、LI、H1=、SPAN、OL、FORM、LABEL==、A、INPUT。
用到的标签属性也没有多少：width(宽度)、height(高度)、float(浮动)、margin(外边距)、padding(内边距)、 line-height(行间距)、overflow(溢出)、backgroud(背景)、border(边框)、text-align(对齐方式)、 display(显示方式)、flont-family(字体)、font-size(字体大小)、color(字体颜色)、cursor(光标)、 font-weight(字体重量-粗体)、text-indent(文本缩进)、text-style(文字属性-斜体等)、text- decoretion(下划线)、list-style(列表样式)、clear(浮动清除)。
我用过的所有标签和属性也大致这些了，感觉除了定位以外，其它想要得到的样式都不算太难，还可以，连HACK也没用多少。所以在这里只说说定位的问题，包括常用的几个浏览器之间的差异(IE-7、IE-6、FireFox、遨游用的IE的内核、GreenBrowser也一样所以你的操作系统的IE 版本就决定了你的显示状况)
一、Float对定位的影响。
一般说来，DIV是块级元素，与按内容占据空间不同的是，DIV在无任何属性下是占用整行的空间，在一个DIV结束之后，另起一行显示另一些内容。如果不对DIV使用Float属性，放在同一个已经设定宽度的容器内是自动换行显示DIV的，而如果对一个DIV使用FLOAT属性而不设定宽度的话，其后的DIV则会在同一行尾随，直到总宽度达到为止。
符合标准的CSS是需要加FLOAT属性的，不设定的话，在FF下有可能会出现故障。
二、IE-6的双边距BUG。
对两个块张元素的嵌套，如果都使用FLOAT属性，在IE-6下会出现双边距现象，比如明明设置margin-left为5px，在IE-6下会显示10px; 这时需要对被嵌套的块级元素使用display:inline;告知此为内联对象。
图示：
在IE7中
在ie6中
这是样式：
三、ID和CLASS的权重问题。
在初期使用ID和CLASS时，我并不以为然，感觉以为在同一页面没有重复出现可能的元素就用DIV，可以重用的样式则用Class，在后来的一次做划动门时，才真正了解ID权重的真正意义。例如下：
#text1 a{font-size:16px; color:#000; font-weight:normal;}
.text1 a{font-size:12px; color:#FFF; font-weight:bold;}
你会发现，虽然我们遵循了CSS的覆盖原则，以后在后来的链接样式上将会覆盖前面的链接样式，但显示情况完全不是这样，你会发现不论怎么修改，“12号字 Class样式”的链接都会显示前面所定义的样式。而我们是将使用ID的DIV内用的是class的元素。而如果反过来用class嵌套div，则不会出现“覆盖失效”的问题。
问题就在于ID的权位是高于Class的，在拥有不同样式的时候，优先使用ID内的样式。特别是在大的元素使用时，更要注意这一点，要不然你都不知道问题出在哪。
四、块级元素居右问题。
在一个DIV容器内如果同时要放置块级元素和非块级元素(比如说文字)时，会遇到一些小问题，如下：
我们想要的是这种效果：
但得到的却是这种效果(CSS如下)：
.test1{width:500px; background: #00CCFF; margin:0 auto; height:500px;}
.test2{float:left;background: #00FF66;}
.test2 span{float:right; width:100px; background: #993366;}
<div class="test1">
<div class="test2">Content for class "test2" Goasd<span>Content for class "test2span"</span></div>
</div>
为什么会出现这种情况呢，我们试一下如果把放在文字前面：
那就会得到我们想要的结果了。
不只，所有的块级元素比如说DIV、H1、IMG(图片)如果设置了align为right的话，都会出现这种情况，对于这个问题为什么会出现，我也想知道…
五、清除浮动
对于清除浮动我自己的理解是：对于在FF里包含容器不会随着其中的内容高度改变而改变，对于这块还不太熟悉，只知道如何解决简单的浮动。这种状况在你给包含容器设置背景颜色或边框时会出现，这里需要加入：
overflow:auto; 难道FF默认：overflow:hidden的？也不对，hidden的话里面的内容也不会显示，像clear:both和zoom:1;等不大懂，
