CSS:CSS使用Tips
Css是前端开发中效果展现的主要部分之一,良好的Css书写习惯可以为实际的项目开发提高效率,也可以为实现良好的团队合作提供保证。
一般新手在使用Css的时候经常会犯一些错误,出现一些不经意的漏洞,如果能从刚开始学习书写Css的时候开始就注重Css使用的一些习惯性的要求,那在以后的项目开发中是很有帮助的。搜集了一些资料,也有一些自己的体会,一下是常用的一些Css使用Tips:
-
不确信、则验证。实际效果至上,不管自己认为效果是怎样,只有放在浏览器上验证之后才能保证无误。
-
测试时,先考虑高级、先进的浏览器,再考虑低级、兼容性差的浏览器。因为我们的代码更多的还是运行在那些优秀的浏览器的优秀的版本之上的,在这些浏览器上完美呈现之后再考虑更多的兼容性,应当是一种比较好的开发策略。
-
若用浮动实现布局,确保正确地清除了浮动。我是不喜欢使用浮动的,脱离常规的流,使用太多浮动的话,很容易导致自己都不知道写出来的样式会怎么呈现了。所以如果使用浮动,一定要确保清除。
-
不要依赖浏览器默认的字体设置,尽可能的明确设置你要使用到的字体样式。
-
为元素应用内边距或外边框来避免外边距重叠。
-
避免同时为元素指定明确的内边距/边框值与宽度/高度值。因为,若某元素需要固定的宽/高度,那么既可以用其子元素的外边距来撑大,也可以用其父元素的内边距来约束。
-
如果只是通过改变颜色来标注链接的话,你要考虑到那些色盲用户怎么办?所以做好的方法还是遵循给链接加下划线的用户习惯。链接规则的顺序可以通过“LoVe/HAte(爱/恨)”方法来记忆,依次为:link、visited、hover和active。若还要考虑:focus伪类,则该规则为LVHFA。
-
避免IE6的“无样式内容瞬间”现象。使用@import语句引入外部样式表,可能会在IE6中出现“无样式内容瞬间”现象,可以通过使用link链接样式表,或者在页面上添加script元素来避免这个问题。HTML文档中几乎可以不用考虑用@import导入样式表的方法,因为这种方法是为了兼容Netscape Navigator 4,而这种浏览器几乎绝迹。
-
不要依靠min-width/min-height属性。IE/Win平台上的IE并不支持这两个属性,但它在某些情况下却把width和height属性认为是min-width或min-height属性。因此,借助于一些只为Windows平台上的IE设计的过滤规则,我们用width和height属性也可以实现min-width或min-height的效果。
-
为非零值标明单位,这是一个很好的习惯。如果某一天需求修改这个值不是零了,那你还记得它的单位才好。
-
一个开发习惯:测试时采用嵌入样式,发布时再改为外部输入。
-
指定图片路径时不要用单引号。
-
尝试减少百分比值。浏览器计算的舍入误差有时会让50%+50%等于100.1%,导致布局被破坏。这时请尝试略为减少百分比的值,例如将50%改为49.9%。
-
使用!important来声明不允许被覆盖的规则,如h3{color:red !important;},但由于IE不支持它,所以现在更多的是作为CSS HACK来使用。