编写高质量代码之css学习

1. padding和margin的简写方式 顺序是按照顺时针来的

2. css子选择器的使用注意事项：

   1. 使用子选择器，会增加css选择符的权重，css选择符的权重越高，样式越不容易被覆盖，越容易对其他选择符产生影响。
   2. 除非是html结构非常稳定，尽量不要使用子选择器
   3. 为了保证样式容易被覆盖，提高可维护性，css选择符需要保证权重尽可能低

3. css sprite 是否需要取决于 对服务器的负荷是否有要求，减少http请求

4. css编写风格：一行式（目前采用的风格）

5. css hack

   1. ie注释法：

       <!--[if lte IE 9]>
           假如版本小于 ie9，则xxx
       <![endif]-->
      

   2. 标签前缀： *html

   3. 属性前缀：_width

6. a标签的四种状态的顺序：l(link) ov(visited)e h(hover)a(active)te

7. inline元素设置了float或者position:absolute属性后，会隐式地激活inline-block属性，既可以设置长宽

8. 居中

   1. 水平居中
      1. 文本，图片等行内元素的居中：父级元素设置text-align:center
      2. 确定宽度的块级元素居中：利用margin:0 auto来进行居中
      3. 不确定宽度的块级元素居中:我比较常用的方法是设置成inline-block，然后父元素设置text-align:center
   2. 垂直居中
      1. 父元素高度不确定的文本，图片，块级元素的垂直居中
         1. 给父元素设置上下相同的padding
      2. 父元素高度确定的单行文本：设置line-height为父元素的高度
      3. 父元素高度确定的多行文本，图片和块级元素居中
         1. 父级元素设置为display:table-cell;vertical-align:middle
         2. 使用position:absolute;top:50%;margin-top:-height(height为文本，图片和块级元素的高度)

9. 布局命名

   1. main，sidebar，content之类的功能块最好不要设置具体样式，只是表明具体区域
   2. 板块的宽度一般不会任意设置，所以一般会用具体的宽度来进行命名class，比如w7025代表该板块占据100%中的75%，为两栏布局,这两栏之间的空隙为5%
   3. 左右浮动也抽取出来取特定的classfr或者 fl，我一般习惯使用left和right

10. z-index

    1. 需要设置position才能激活z-index,但是元素设置了float属性后也会隐式激活z-index
    2. 当几个元素的z-index是一样的时候，渲染时，后出现的元素会在先出现的元素之上
    3. z-index可以有负值，但是如果是负值的话，鼠标无法点击到（body是0）
    4. 设置margin-left（right）为负值（负边距）可以让相邻元素的位置产生重叠，后出现的元素在先出现的元素之上：

       <style>
            span{display: inline-block;padding: 2px 5px;background: #ddd}
            .s2{margin-left: -20px;background: #f00}
        </style>
    
        <div>
            <span class="s1">span1</span>
            <span class="s2">span2</span>
        </div>