CSS项目开发技巧

  1. CSS缩写:
  • A. 边框缩写:border:1px solid #f90;
  • B. 外边距内边距缩写:margin/padding:1px 5px 1px 5px;顺序是顺时针 上,右,下,左;
  • C. 背景缩写:background:color image repeat attachment position ;
  • D. 字体缩写:font:family size style line-height;
  1. 对input设置完height后,要继续设置line-height 如果是一行的话设置成一样的值,这样才能在各个浏览器正确显示,否则IE8输入的字体会偏高
  2. IE6不支持子选择器 比如div>p ;在IE7及以上以及“现代浏览器”可以识别出来
  3. IE6 同时也不支持属性选择器 比如 a[title=”title”]。IE7及“现代浏览器”可识别
  4. \反斜线注释可以区别mac和IE5,因为他们认为反斜线后面的注释结束符不起作用,忽略后面的样式,直到遇见下一个注释结束符;简单的说类似这样的属性w\idth:200px;这样的只有IE5和mac还有opera5不识别,其他浏览器均识别
  5. 想要找到CSSbug可以给元素加上background-color属性或者border属性来找出问题,前者比较方便观察,后者能意外的修复pading和margin的问题
  6. Selector {*property:value}或者Selector {+property:value}这样格式的只有IE7以及以下版本可以识别;Selector {_property:value}这样的格式只有IE6及以下版本可以识别
  7. *html Selector {property:value}只有IE6及以下版本可以识别;*html/**/>body Selector {property:value}只有IE6及以下版本不识别;*+html Selector {property:value}只有IE7版本识别;
  8. Selector {property:value\9}这个hack IE6及以上版本都识别,非IE不识别;Selector {property:value\0} 只有IE 8 识别;
  9. CSS样式优先级遵循就近原则,所以写不用浏览器的hack时,越特殊的越往后面放
  10. 单行文字垂直居中:设置line-height的值等于height即可,同时加上overflow:hidden防止在IE6及以下版本撑开容器,另外一种方法,设置display:table-cell,这样div会像表格单元格一样,加上vertical-align:middle就可以垂直居中了,但是IE7及以下版本不支持;
  11. 多行文字垂直居中:IE7以上版本及其他标准浏览器可以使用单行文字的第二种方法,对于IE7及以下版本使用hack。嵌套两个容器,外容器相对定位,内容器相对定位top等于50%即可
  12. “块”水平居中:设置margin:0 auto;在IE6不能居中,可以设置text-align:center,对子元素设置text-align:left;
  13. 浮动的清除:父元素包含了若干浮动子元素,如果对浮动不清除,就是导致父元素高度不能等于子元素高度,清除方法一,在最后一个子元素后面加一个宽度高度为0,clear属性为both的元素(clear属性只能应用于块级元素),方法二,使用伪类after,方法三,对父元素设置overflow:hidden属性(IE6还需要加zoom:1属性或者height:1%);
  14. 尽量不要使用相对或者绝对定位,在不同的浏览器下定位差别比较大。
  15. 背景属性可以设置背景的位置,有关键字,百分比,像素值这三种方法,分别设置的是上下的位置和左右的位置。
  16. 为自己准备一份CSS初始样式表,我的习惯是实用YUI的reset.css,将常用的方法也写在这个文件里面,一次调用,就可以省去很多时间做前期准备
原文链接:,转发请注明来源!

发表评论