高质量CSS

怪异模式和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的方式显示。