编写高质量代码、学习笔记——CSS篇

如何组织CSS：

        base.css + common.css + page.css

        1.base层，可被所有页面引用，是最底层。

            包括去除浏览器默认样式、文字排版、定位、边距等。

        2.common层，提供组件级的CSS类，将页面大量重复的“模块”提取出来；

        3.page层，非高度重用，每个页面都有。

4.高质量编写代码：

           <1>CSS命名：骆驼命名法用于区别单词，划线用于表明从属关系，例如：

            .timeParent-timeChild

           <2>多用组合，少用继承。实现样式，多用class定义不同样式，少用子类继承父类的方法。

           <3>处理上下margin。

                  margin有个特点，相邻margin-left和margin-right不重合，但margin-top和margin-bottom会重合。

                  所以对模块而言统一使用margin-top或margin-bottom的一个来设置。

                  设置margin最好使用类的组合，单独为上下margin挂用于边距的类。

           <5>低权重——避免滥用子选择器

                  权重规则：标签权重1，class权重10，id权重100，例如：“#test .red” 权重是 100 + 10 = 110

           <6>推荐编码风格：一行式

           <7>少用id，尽量使用class 

           <8>relative、absolute、float

                  默认只有设置了，position: relative和position: absolute才会激活元素属性：left、right、top、bottom、z-index

                  居中（用处多多啊）

                  水平居中：

                   1>文字图片等行内元素的水平居中

                        父元素设置：text-align:center

                   2>定宽块级元素水平居中

                        margin-left:auto和margin-right:auto

                   3>非定宽块级元素水平居中        

<span>		</span>display:inline; text-align:center;

                   竖直居中：

                   1>父元素高度不确定的文本、图片、块级元素

                       给父容器设置相同上下边距。

                   2>父元素高度确定的单行文本

                        给父元素设置line-height，其值和父元素的高度值相同。

                   3>父元素高度确定的多行文本、图片、块级元素

                        支持：display:table-cell的浏览器IE8和火狐

<span>		</span>display:table-cell; vertical-align:middle

     不支持的IE6 IE7：1.先设置position: relative和position: absolute     2.给父子两层分别设置top:50%;top:-50%