学习WEB标准化一段时间来问题汇总

在由表格作为架构做网站到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是块级元素，与<SPAN>按内容占据空间不同的是，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;}
    <div id="text1">
      <div class="text1"><a href="#">12号字Class样式</a></div>
    </div>
   你会发现，虽然我们遵循了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>

    为什么会出现这种情况呢，我们试一下如果把<span>放在文字前面：
    <div class="test2"><span>Content for  class "test2span"</span>Content for class "test2" Goasd</div>
    那就会得到我们想要的结果了。
    不只<span>，所有的块级元素比如说DIV、H1、IMG(图片)如果设置了align为right的话，都会出现这种情况，对于这个问题为什么会出现，我也想知道...

 五、清除浮动
对于清除浮动我自己的理解是：对于在FF里包含容器不会随着其中的内容高度改变而改变，对于这块还不太熟悉，只知道如何解决简单的浮动。这种状况在你给包含容器设置背景颜色或边框时会出现，这里需要加入：
overflow:auto; 难道FF默认：overflow:hidden的？也不对，hidden的话里面的内容也不会显示，像clear:both和zoom:1;等不大懂，