怪异模式和DTD

 

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

 

在标准模式中,浏览器根据规范 表现页面;而怪异模式通常模拟老的式浏览器(比如IE4 )的行为以防止老站点无法工作。

 

这两种模式的差异比较大,比较典型的就是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;

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