一.样式优先级
- 越具体优先级越高
- 同优先级后者覆盖前者
- @import级联导入时，越早导入的优先级越低（常用于实现用户自定义样式，例如CMS提供的模版允许用户自定义一部分样式，这些样式需要有最高优先级）
- 行内样式 > #（id选择器） > ./:（类选择器/伪类选择器） > tag/::（标签选择器/伪元素选择器）
- 有!important声明的样式具有最高优先级（IE7+支持）
二.如何支持移动浏览器
SSR（小屏幕渲染）：一种浏览器特性，此类浏览器能够自动优化页面展现
缺点：用户要有特定的浏览器（例如Opera）才能看到效果，而且重渲染会降低访问速度
优点：页面设计者完全不用做任何改变
Reformat（编程重格式化）：用服务端技术对页面做简化，为移动端用户生成一个“轻”页面
缺点：访问速度会降低，而且服务端并不能完美控制页面内容
优点：访问速度高于SSR，且页面设计者只需要做少许改变（为重格式化创造一个通用的Reformat方法，并应用于所有页面）
Stylesheets“便携式”样式表：利用media query（媒体查询）构造响应式布局
缺点：需要维护多套样式表，而且不能控制页面内容
优点：访问速度快，且工作量不算太大
Mobile Specific Site（创建移动版站点）：为站点创建一个移动端专用的版本
缺点：费时费力，工作量大
优点：访问速度最快，同时也可以自由控制页面内容和样式
三.消除盒子坍塌的方法
声明固定高度
缺点：不具可扩展性，无法自适应内容
浮动所有元素
缺点：可读性差，不易于维护
在盒子底部添加空的block元素，并对该元素应用clear: both;样式
缺点：引入了冗余元素
用after伪元素清除浮动
overflow: auto; width: 100%;
缺点：不能应用边框及边距，否则会出现水平滚动条
四.负边距（margin: -100px;）的作用
主要用来解决布局顺序与文档源顺序的冲突，例如HTML中导航栏位于内容栏之后，而我们希望导航栏显示在内容栏的左边而不是右边时，给导航栏设置负边距即可。但因为负边距难以理解，所以在不得不用时也要作以详细注释。
五.CSS实现图片预加载
用空的span标签的background-image属性携带图片，以避免实时加载的延迟
六.常用的logo替换方式
一般logo都是图片，但搜索引擎的爬虫程序并不能识别logo的语义，为了SEO我们应该把logo和文字描述共同展现出来，例如<h1 style=”background-image:url(…)”>SiteName</h1>，但此时logo上面会显示文字，解决方法有以下两种：
对h1应用padding-top: 100px;样式，其中100px是图片的高度，这种方式更符合语义化设计
对h1应用text-indent: -9999em;样式，这是一种更简单的方式，但不符合语义化设计
七.用link与style+@import导入样式的区别
前者有更好的兼容性与支持性，例如可以提供media=”screen”等筛选条件
八.样式调试步骤
验证标签和样式
是否存在未闭合的标签，HTML与CSS中的样式名是否一致
让样式失效
是不是继承来的样式引发了错误，是不是更特殊的规则掩盖了重要规则，哪些样式规则没有作用
让hack失效
hack有没有正常工作，或者hack代码中存在问题
剥离最小测试块（尽量精确定位错误）
整个页面不便于调试，试图剥离最小测试块单独调试
特别注意：排查CSS错误最好删改备份样式文件，而不是注释现有样式，因为这样做更“安全”
九.font（字体）相关
1.字样分类（一般font族）
Serif（font-family:serif;）
特点：字体的宽度成比例，而且加修饰。成比例也就是说各个字母宽度不一致，M最宽，i最窄。修饰是指在笔画起止部分有小修饰，提高了易读性。包括Time New Roman、Georgia、Garamond等等
用途：通常用在大篇幅正文中或者很长的段落以及打印字体，不常用于标题和副标题
Sans Serif（font-family:sans-serif）
特点：宽度成比例，但没有修饰，包括Helvetica、Verdana、Arial、Univers等等
用途：多用于标题和副标题
Monospace（font-family:monospace;）
特点：等距字体，可能有修饰。等距字体是说每个字母的宽度都是一样的，包括Courier、Monaco等等
用途：主要用于指示性文本，例如代码
Cursive（font-family:cursive;）
特点：手写体（或草体），包括Comic Sans、Zapf Chancery、Zapfino等等
用途：可读性不如第一个和第二个，一般不用来展示正文
Fantasy（font-family:fantasy;）
特点：主要起装饰作用的字体，包括Desdemona、Playbill、Herculanum等等
用途：此类字体很少用于网络，一般用来设计logo图片
2.关于font-family属性的值
若字体名含有空格或者其它有歧义的字符，则需要用引号包裹起来（单引号/双引号都可以）。也可以有多个备选字体，字体名之间用逗号隔开。
3.关于font-weight
尽量只用bold和normal，而不要使用100-900的数值，因为某些字体可能并没有9个级别的font-weight（你并不能保证用户看到的页面一定是你设置的字体，很多浏览器支持用户使用自定义字体）
4.关于font-size
应该尽量使用em或者百分数，而且可以用62.5%hack，即给body添加font-size:62.5%;样式，因为大多数浏览器默认1em=16px，62.5%后1em=10px便于计算
不要直接用px设置font-size是因为IE6-不允许用户重新设置用px指定了font-size的字体
十.CSS常识
把所有样式表文件放在同一个文件夹。如style/css
合并样式表文件。用@import或者直接合并
类和id名称应该坚持使用一种（或服从团队约定）。例如class_name、className、class-name等等
单行格式多多行格式的应用：编辑版本用多行格式便于调试，发布版本用单行压缩格式便于快速加载
CSS属性排序应该有一定的规则。为了避免重复，例如按字典需排列或者按其它规则排列
适当使用CSS缩略语，例如border: 1px solid red;等等。要把握适当的“度”，以免语法过于复杂，难以理解
用注释给样式分组。有一种不错的格式：/*=group */，查找等号就可以找到所有分类（因为CSS规则中不可能出现等号）
添加元数据注释。便于修改和管理，例如给样式表文件开头添加作者、日期等相关描述
可以用注释在文件首声明样式中重复使用的色值、字体等属性值
样式表文件中的CSS规则应该有特定的顺序。例如从一般到特殊、根据元素在页面中的位置顺序或者根据内容分区来排序，但需要注意的是第2种方法可能引发问题（规则可能被继承/覆盖）
使用reset.css/initial.css重置样式。为了消除浏览器默认样式之间的差异
可以构建样式库甚至实现自己的CSS框架。为了提高可复用度
自定义列表项符号应该用li的background。而不是用list-style-image，因为IE6中list-style-image并不是与li内容垂直对齐的，用背景图片实现，自由度更大而且浏览器兼容性也更好
导入打印样式表的语句应该在head内任何样式导入/声明部分之后。如果先声明打印样式，可能会忽略之后没有声明media属性的样式
参考资料：
《Pro CSS Techniques》（中文译名《CSS实战精粹》），翻译不是特别好，但由于是2008年左右出版的书，对IE6-的兼容调试有不错的指导意义。
