Web前端开发修炼之道-CSS篇（转+改）

模块拆分原则：
1.模块与模块之间尽量不要包含相同的部分，如果有相同的部分，应将它们提取出来，拆分成一个独立的模块.
2.模块应在保证数量尽可能少的原则下，做到尽可能的简单，以提高重用性。

CSS调用：
1.将相同的部分抽取出来单独成为一个calss
2.多用组合，少用继承
3.多使用<div calss="a b c"></a>,少使用<div class="a_b_c"></div>

上下边距(Margin)：
1.如果不确定模块的上下margin特别稳定，最好不要讲它写到模块的类里，而使用类的组合，单独为上下margin挂用于边距的原子类(例如mt10、mt20)。模块最好不要混用margin-top和margin-botton，统一使用margin-top或margin-botton.
2.连着的margin-top和margin-botton会合并取两者最大的值。margin-left和margin-right则不会有这样的问题。

低权重原则
1.CSS选择符是有权重的，当不同选择符的样式设置有冲突时，会采用高的选择符设置样式。
2.权重规则：HTML标签的权重是1，class的权重是10，id的权重是100，有important标识的权重最大。例如p的权重是1，“div em”权重就是1+1=2，”strong.demo”的权重是1+10=11，”#test .red”的权重是100+10=110.
3.如果CSS选择符权重相同，那么样式会遵循就近原则，那个选择符最后定义，就采用那个选择符的样式。 4.”就近原则”指的是选择符定义的先后顺序，而不是挂class名的先后顺序。
5.为了保证样式容易被覆盖，提高可维护性，CSS选择符需要保证权证尽可能低。

CSS sprise
1.是否使用CSS sprise主要取决于网站的流量。最大的好处是减少HTTP请求数，减轻服务器的压力，但“降低开发效率”，“增大维护难度”。

ID和Class
1.一般情况下，多使用clsss,少使用id

CSS hack
1.IE条件注释法 
2.选择符前缀法 ‘‘ 前缀最对IE6有效, ‘+前缀只对IE7有效
3.样式属性前缀法 ‘_’ 只在IE6下生效, ‘‘(这是一个星号)在IE6和IE7生效
<style> .test{width:80px;_width:70px;_*width:60px} </style>
4.超链接的顺序 LoVe HAte
5.hasLayout haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。hasLayout属性是微软特有的过时属性，在IE8、IE9中，hasLayout属性已经被废弃。

haslayout 问题引起的常见 bug：
IE6 及更低版本的双空白边浮动 bug
bug 修复: display:inline;

IE5-6/win 的 3 像素偏移
bug bug 修复: _height:1%;

IE6 的躲躲猫(peek-a-boo) bug
bug 修复: _height:1%; 使用”zoom:1”可以触发hasLayout.

6.块级元素和行内元素的区别
常见块级元素：div、p、form、ul、ol、li等。
常见行内元素：sapn、strong、em等。
块级元素即使设置了宽度，仍然是独占一行的，宽度自动填满其父元素宽度。
行内元素不会独占一行，其宽度仅仅随元素的内容而变化。相邻的行内元素会排列在同一行里，直到一行排不下去，才会换行。
块级元素可以设置margin和padding属性。行内元素的margin和padding属性只有水平边距，没有竖直边距。行内元素竖直方向的padding虽然增大了面积，但并没有和相邻元素拉开距离。