怪异模式和DTD
为了确保向后兼容性,浏览器厂商发明了标准模式和怪异模式两种方法来解析网页。
标准模式
根据规范表现页面;网页元素的宽度是由padding、border、width三者的宽度相加决定的;
怪异模式
通常模拟老式浏览器的行为以防止老站点无法工作;width本身就包含了padding、border的宽度。
此外,标准模式下的块级元素的经典居中方法——设定width,然后margin-left:auto,margin-right:auto——在怪异模式下也无法正常工作。
怪异模式的目的是为了兼容老式浏览器下的代码,其很多解析方式是不符合标准的,所以应该避免触发怪异模式。
怪异模式的触发
如果漏泄DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中(包括IE6、IE7、IE8)就会触发怪异模式。
DTD:Document Type Definition,即文档类型定义。DTD是一种保证HTML文档格式正确的有效方法,可以通过比较HTML文档和DTD文件来看文档是否符合规范,以及元素和标签使用是否正确。
常见的DTD类型有4种:
(1)用于HTML 4.01的严格型;
(2)用于HTML 4.01的过渡型;
(3)用于XHTML 1.0的严格型;
(4)用于XHTML 1.0的过渡型;
如何组织CSS
CSS的组织方式有多种角度,如按功能划分、按区域划分等。有一种合适的组织CSS的方法:base.css + common.css + page.css。
base层
base力求精简和通用,具有高度可移植性。不同设计风格的网站可以使用同一个base层。
common层
提供组件级的CSS类,提供高度重用的模块。不同网站有不同的common层
page层
非高度重用的模块放在page层。page层是页面级的,每个页面都可能有自己的page层CSS。
推荐的base.css
base.css通常可以分为两大部分:CSS reset和通用原子类。
CSS reset
HTML标签在浏览器中都有默认的样式,如p标签有上下边距。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,在Firefox下,它的缩进是由padding实现的。一开始就通过重新定义标签的样式来覆盖掉浏览器的默认样式,就是CSS reset。
通用原子类
通用原子类是一系列常用的基本类,包括:文字、定位、长宽和边距。
通用原子类具有两个特点:
(1)通用性:表现在它们是网站最常用的类,任何页面都可以随意使用它们;
(2)原子性:表现在它们是最基础的样式,一个类只设置一个样式,不可再分。
模块化CSS——在CSS中引入面向对象编程思想
单一职责
(1)模块与模块之间尽量不要包含相同的部分,如果有相同部分,应将它们提取出来,拆分成一个独立的模块;
(2)模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。
多用组合少用继承
margin处理
margin-top和margin-bottom会产生重合。
如果不确定模块的上下margin特别稳定,最好不要将它写到模块的类里,而是使用类的组合,单独为上下margin挂用于边距的原子类(如mt10,mb20)。模块最好不要混用margin-top和margin-bottom,统一使用margin-top或margin-bottom
低权重原则——避免滥用子选择器
CSS飞选择符是有权重的,当不同选择符的样式设置有冲突时,会采用权重高的选择符设置的样式。
权重的规则是:HTML标签的权重是1,class的权重是10,id的权重是100.
如果CSS选择符权重相同,那么样式会遵循就近原则,哪个选择符最后定义,就采用哪个选择符的样式。
为了保证样式容易被覆盖,提高可维护性,CSS选择符需保证权重尽可能低。
少使用子选择器,多使用class有利于维护。
CSS sprite
通过改变背景图的background-position属性来在指定大小的容器里展示部分位置的背景图,称为图片翻转技术。
按照图片翻转技术的思路,将网站的多张背景图片合并到一张大图片上,即CSS sprite。
CSS sprite的最大好处是减少HTTP请求数,减轻服务器的压力,但代价是降低开发效率、增大维护难度。是否使用CSS sprite主要取决于网站的流量。
CSS的常见问题
id和class
id的权重为100,而且不能重用,使用id会限制网页的扩展性,所以尽量使用class,少用id;
CSS hack
(1)IE条件注释法
(2)选择符前缀法:在CSS选择符前加一些只有特定浏览器才能识别的前缀,从而让某些样式只对特定浏览器生效。如:*html前缀只对IE6生效,*+html前缀只对IE7生效;
(3)样式属性前缀法:在样式的属性名前加前缀,这些前缀只在特定分浏览器下才生效。如:_只在IE6下生效,*在IE6和IE7下生效;
虽然IE条件注释法在理论上是首推的hack方法,但因为它不利于开发和维护,所以事实上最流行的hack方式是选择前缀法和样式属性前缀法。
超链接访问后hover样式不出现的问题
a标签的四种状态的排序问题——love hate原则,即l(link)ov(visited)e h(hover)a(active)te。
块级元素和行内元素的区别
常见的块级元素:div、p、form、ul、ol、li等;
常见的行内元素:span、strong、em等。
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度;行内元素不会独占一行,响铃的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。
块级元素可以设置width、height属性,即使设置了宽度,仍然是独占一行;行内元素设置width、height属性无效。
块级元素可以设置margin和padding属性;行内元素的margin和padding属性很奇怪,水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果,但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
块级元素对应display:block;行内元素对应display:inline。
relative、absolute和float
position:relative和position:absolute可以改变元素在文档流中的位置,设置position:relative和position:absolute可以让元素激活left、top、right、bottom和z-index属性。
position:relative会保留自己在z-index:0层的占位,left、top、right、bottom值是相对于自己在z-index:0层的位置,并且不会对其他仍然在z-index:0层的元素造成影响。
position:absolute会完全脱离文档流,不再在z-inde:0层保留占位符,其left、top、right、bottom值是相对于自己最近的一个设置了position:relative或position:absolute的祖先元素的,如果祖先元素全都没有设置position:relative或position:absolute,那么就相对于body元素。
float只能通过float:left和float:right来控制元素在同层里“左浮”和“右浮”。float会改变正常的文档流排列,影响到周围元素。
position:absolute和float会隐式地影响display类型,只要设置了position:absolute、float:left、float:right中的任意一个,都会让元素以display:inline-block的方式显示。