1.浏览器模式和DTD
我们平常用到的浏览器可能有多个模式,比如标准模式,兼容模式。在标准模式中,浏览器根据规范显示页面。兼容模式为了兼容老版本浏览器下的代码,用了很多非标准的解析方式。
DTD全称Document Type Definition(文档类型定义)。一个DTD包含元素的定义规则、元素间关系的定义规则、元素可使用的属性、可使用的实体或符号规则。
如果漏写了DTD,IE6,IE7,IE8就会触发兼容模式。DTD详细参考
http://www.w3school.com.cn/tags/tag_doctype.asp
2.如何组织CSS代码
《编写高质量代码》一书中推荐base+common+page的层叠结构。
2.1base层
base层力求精简通用,提供CSS reset功能和力度最小的通用类——原子类。该层会被所有页面引用,与具体UI无关。
由于每个浏览器的默认样式都不统一,所以可以在这层通过CSS reset覆盖浏览器的默认样式,统一定义成自己的样式。
2.2common层
common层位于中间,提供组件级的CSS类。代码尽可能封装复用。
2.3page层
page层位于最高层,控制具体页面的精确样式,所以每个页面都可能会有一个page。建议将网站所有page层代码放在一个文件里。分块写上注释,便于维护。
3.面向对象风格的CSS
顾名思义,CSS在书写时的命名规范,结构组织可以参考面向对象编程的一些规范。比如使用驼峰命名来区分单词,.itemList,使用“-”来表示从属关系,itemList-firstList。多用组合,少用继承等。
另外,本书还推荐少用低权重原则。多用class,少用子选择器。这样样式容易被覆盖,易于维护。
4.CSS Sprite
Sprite看起来好用,其实还有一些注意点:
1.它能合并的只能是用于背景的图片,对于<img src="" />设置的图片,是不能合并到CSS Sprite中的,这样会影响可读性。
2.不适用与横向和纵向都平铺的图片。
3.CSS Sprite最大的好处是减少服务器压力。这需要付出“降低开发效率”和“增大维护难度”的代价。如果你的网站流量并不大的话,并不推荐用这种方法。
5.其他问题
5.1 CSS hack
5.1.1 IE条件注释法
<!--[if IE6]> 只在IE6下生效 <![endif]--> <!--[if gt IE6]> IE6以上都生效 <![endif]--> <!--[if ! IE6]> 只在IE6下不生效 <![endif]-->
这是微软官方推荐的hack方式,它是最安全的hack方式。
5.1.2选择符前缀法
在CSS选择符前加一些只有特定浏览器才能识别的符号,从而让某些样式只对特定浏览器生效。例如“*html”只对IE6生效。“*+html”只对IE7生效。
5.1.3样式属性前缀法
在CSS属性名前加一些只有特定浏览器才能识别的符号,从而让某些属性只对特定浏览器生效。例如“_l”只对IE6生效。“*”只对IE6,IE7生效。
.box{ width:60px; _width:60px; *width:60px; }
5.2超链接样式问题
只要遵循love hate原则就没问题:l(
link )ov(
visited)e h(
hover)a(
active)te。
5.3 hasLayout
IE奇葩的根源。这个在精通css系列中有讲。触发hasLayout会解决大部分IE下的bug。通过设置“zoom:1”和“posisiton:relative”来触发是最有保障的方式。
hasLayout设计初衷是为了辅助块级元素的盒模型解析的,如果用于行内元素,会有一些特殊的效果。
5.4块级元素和行内元素
常见块级元素:div,p,form,h1,caption,dd,dt,dl,table,ul,ol......
常见行内元素:a,img,strong,span,input,i,br......
区别:
1.块级元素独占一行,默认其宽度填满父元素宽度。行内元素不会独占一行,宽度随元素内容变化,没有width,height属性;
2.块级元素可以设置margin,padding。行内元素可以设置水平方向的margin,padding,竖直方向的不会产生边距效果;
display还有inline-block属性,IE6,IE7下会有bug,修复方法百度一下。