高质量的css--css hack ,行元素，块元素，居中，定位

 1.DTD：document type definition。
 2.组织css base.css+common.css+pages.css 功能职责，层叠结构。
       base 被所有页面都引用，是页面样式所需依赖的最底层 一个
       common 组件 网页中高度重用的模块 一个
    page 非高度重用模块   可谓为多个
 3.css 命名 简单明了，最好用简单的英文组合
 4.margin上下重叠：统一规范，要么全用margin-top，要么margin-bottom。或者，上下用padding 左右用margin
 5.优先级--避免滥用子选择器，不用的选择符样式设置有冲突时，会采用权重高的选择器设置的样式。
     id-100 class-10 标签-1（从内容所在的源码中的位置推算）
      组合选择器class="test test1":从test与test1 在样式表中定义的位置，那个在后面，优先使用那个的样式
 6.css的常见问题
    1.编码，html代码、css、js三者的编码方式一致
    2.尽量使用class，少使用id。原因id会限制页面的扩展性
     3.css hack
            1)ie条件注释法<!--[if ie]>.....<![endif]-->
        2)选择符前缀  *html .test{}
            3)样式属性前缀-最流行方式 height:100px;/*for all*/ *height:120px;/*for ie7*/  _height:150px;/*for ie6*/  
           width:120px;/*for all*/    width:120px\9;/*for ie*/
    4.超链接方式LVHA顺序
           方便简洁: a{}  a:hover{}
    5.hasLayout：IE浏览器为解析盒模型而设计的一个专有属性，用于css的解析引擎，需要触发。设计初衷是用于块元素
        zoom:1 是最常用的、最安全、承成本最小的触发haslayout。若还是无效，在使用position:relative触发haslayout，但是可能会带来副作用
        6.行元素 块元素
        块元素：独占一行，默认情况下，其宽度自动填满父元素的宽度，即使定义了块元素的宽度，他也会独占一行，除非他设置了浮动或定位
        行元素：不会独占一行，宽度随元素的内容变化，设置width, height,margin-top,margin-bottom,padding-top,padding-bottom（竖直方向）不会产生效果，但是水平方向是可以设置的
    7.display:inline-block : 行内的块级元素（拥有块级元素特点的行内元素），可以设置常宽、margin、pading值，但是却不能独占一行，他的宽度并不占满父元素，而是和行元素一样，可以与其他行元素排在同一行里。它集行元素与块元素的特点于一身，是个非常有用的display类型，ie6，ie7不支持此样式
        ie6，7中对行内元素触发haslayout，可以模拟display:inline-block 效果(针对于行内元素，)
             span{width:100px; height:30px; display:inline-block; *vertical-align:-10px}
            or  span{width:100px; height:30px; zoom:1; *vertical-align:-10px}    

    8.relative absolute float ： z-index:0 文档流
                relative position可以触发top，left，right，bottom和z-index属性(默认情况下，这些属性未激活，设置了也无效)
        relative：保留自己在z-index:0层的占位，
        absolute：完全脱离文档流，不再z-index:0中保留占位符。
        float：改变文档流，但仍在z-index:0层排列 ，float会改变正常文档流的排列，影响到周围元素。在ie6下会有双倍边距bug，通过display:inline解决
             absolute 与 float 会改变display属性，为display:inline-block，可以设置长宽，但是不会占满父元素。重新设置display无效
    9. 居中
               行内元素（文本、图片）: text-align:center
               块级元素：margin:0 auto;