一、在实际使用中,使用类要注意:多用组合,少用继承。
上下margin重合问题:margin是个特殊的样式,相邻的margin-left和margin-right是不会重合的,但相邻的margin-top和margin-bottom会产生重合。
如果不确定模块的上下margin特别稳定,最好不要将它写到模块的类里,而是使用类的组合,单独为上下margin挂用于边距的原子类(如mt10/mb20)模块最好不要混用margin-top和margin-bottom,统一使用margin-top或margin-bottom之一。二、CSS选择符权重:
当不同选择符的样式设置有冲突的时候,高权重选择符的样式会覆盖低权重选择符的样式。
权重规则:HTML标签的权重是1,class的权重是10,id的权重是100。例如,strong.demo的权重是10+1=11。
相同权重的选择符,样式遵循就近原则:哪个选择符最后定义,就采用哪个选择符样式。(注意:是样式中定义该选择符的先后,而不是html中使用先后)三、CSS Sprite注意点:
1.技术是针对作为背景的图片,对与html文档<img src=""/>设置的图片,不能合并到CSS Sprite大图,否则图片会影响页面可读性。
2.对于横向和纵向都平铺的图片,也不能使用CSS sprite;如果是横向平铺的,只能将所有横向平铺的图合并成一张大图,只能竖直排列,不能水平排列;如果是纵向平铺的,只能将所有纵向平铺的图合并成一张大图,只能水平排列,不能竖直排列。
3.CSS sprite的图片定位可以使用bg2css小工具快速定位background-positon坐标,有利于提高开发速度。4.好处是减少HTTP请求数减轻服务器压力,缺点是降低开发效率、增加维护难度。CSS Sprite大图中每个图片的维护改动都要谨慎,防止影响周围的图片。
网站是否使用CSS Sprite技术,主要取决于网站流量。
四、CSS hack
1.IE条件注释法
该方法安全性好,但是不利于开发维护。比如涉及到针对不同版本IE的css。
<!--[if IE]><![endif]--> 只在IE下有效
<!--[if IE 6]><![endif]--> 只在IE6有效
<!--[if gt IE 6]><![endif]--> 只在IE6以上版本有效
注意:结合lte、lt、gte、gt、!关键字使用。
2.选择符前缀法
“*html” 前缀只对IE6生效 "*+html"前缀只对IE7生效
.test{width:80px;} /*IE 6 7 8*/
*html .test{width:70px;} /*IE6*/
*+html .test{width:60px;}/*IE7*/
缺点:不能保证IE9,10不识别*html,*+html,有向后兼容风险。
3.样式属性前缀法:
如“_”只在IE6下生效,“*”在IE6和IE7下生效。同样有向后兼容隐患。
.test{width:80px;*width:70px;_width:60px;}
可用于内联样式:<div style="width:80px;*width:70px;_width:60px;"></div>
由于IE条件注释法不利于开发维护,实际中常用的hack方法常常是后两者。
五、超链接访问后hover样式不出现的问题
原因:a:hover和a:visited顺序不对。
四种状态的正确顺序:
a:link
a:visited
a:hover
a:active
为便于记忆,叫做love hate原则,即l(link)ov(visited)e h(hover)a(active)te。