高质量的css

 

怪异模式和DTD

 

为确保向后兼容，浏览器厂商发明了标准模式和　怪异模式　这两种方式来解析　网页。

 

在标准模式中，浏览器根据规范　表现页面；而怪异模式通常模拟老的式浏览器（比如IE４　）的行为以防止老站点无法工作。

 

这两种模式的差异比较大，比较典型的就是IE对盒模型的解析：

　在标准模式中，网页元素的宽度是由padding,border,width三者的宽度相加决定的；而在怪异模式，width本身包括了padding和border的宽度。

此外，标准模式下块级元素的经典居中方法：设定width，然后margin-left:auto;margin-right:right;在怪异模式下是无法正常工作的。

 

同样的代码 在怪异模式和标准模式下的表现很可能相差甚远。因为发现怪异模式 的目的就是 为了兼容老式的 浏览器下的代码，它的很多解析方式是不符合标准的，所以，一般情况下，我们应该避免触发怪异模式，应选用 标准模式。

 

怪异模式的触发与 DTD有关。

HTML文件开始声明文件的DTD类型。如漏写DTD声明，Firefox仍然会按照标准模式来解析 网页，但在IE中（包括IE 6 7 8）就会触发 怪异模式。在css布局时代，DTD的声明非常重 要，为避免怪异模式给我们 带来不必要的麻烦，要记得DTD声明。

 

 

 

模块化CSS

 

 

margin是个特殊的样式，

相邻的margin-left和margin-right是不会重合的，但相邻的margin-top和margin-bottom会产生重合，

 

所以margin-top和margin-bottom最好不要重合使用。

 

 

 

 

当不同的选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。

权重的规则：

HTML标签的权重是1，class的权重是10， id的权重是100，

例如p的权重是1，'"div em"的权重是1+1=2；“strong.demo”的权重是10+1=11 ....

 

如果CSS选择符权限相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。

 

 

id与class的区别

同一个网页，相同的id只能出现一次，它不可重复，而class可以任意出现多次，

id的权重是100，class的权重是10

 

 

 

CSS hack

 

IE条件注释法：

 

只在IE下生效

<!--[if IE]>

<link type="text/css" href=""   >

<![endif]-->

 

只在IE6下生效

<!--[if IE 6]>

<link type="text/css" href=""   >

<![endif]-->

 

如果我们想针对某个范围以内的IE版本进行hack，可以结合lte, lt, gte, gt, !关键字来注释

其中lte 表示 小于等于，lt 表示 小于， gte 表示 大于等于；

if gt IE 6

if ! IE 7      只在ie7上不生效。

 

 

 

选择符前缀法：

 

例如*html 只对IE6生效，

*+html前缀只对IE7生效。

但不能保证以后的 IE9 10 不识别。。有风险

 

.test{  }                /*ie 6 7 8*/

*html .test{  }      /*ie 6*/

*+html .test{  }   /*ie 7*/

 

 

 

样式属性前缀法： （还可以用于内联样式）

 

_ 只在ie6生效，

*在ie6 7 下生效

样式属性前缀法 比起选择符前缀法 聚合程度 更高，代码更精简，可维护性更强，但和选择符前缀法一样，它在向后 兼容性上 存在 一点风险

 

 

 

 

hasLayout

触发方法：设置width height,position为relative等

 

 

 

水平居中：
文本、图片等行内元素的水平居中   text-align:center

确定宽度的块状元素的水平居中 margin-left:auto;margin-right:auto;

不确定宽度的块状元素的水平居中