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条件注释法
<!--[if IE 6]>
CSS内容
<![endif]-->
2.选择符前缀法
"*html"前缀最对IE6有效
"*+html"前缀只对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虽然增大了面积，但并没有和相邻元素拉开距离。