Author：Chemandy
第一章 基础知识
- div和span
①div实际上代表部分（division），它可以将文档分割为几个有意义的区域。所以通过将主要内容区域包围在div中并分配Content类，就可以在文档中添加结构和意义。
②为了将不必要的标记减到最少，应该只在没有现有元素能够实现区域分割的情况下使用div元素。
③span可以用来对行内元素进行分组或标示。
- 微格式
①基于vCard和iCalendar等现有的数据格式，开发的一套标准的命名约定和标记模式来表示人、地点、或日期等类型的信息。
- XHTML 1.0页面可以作为HTML文档，而XHTML 1.1页面是作为XML发送给浏览器。
- 进行W3C验证，html文档和CSS文档。
- Doctype对浏览器验证、浏览器模式有影响。
第二章 为样式找到应用目标
- CSS 2.1中兼容问题：
IE6：
不支持多类选择器：.class1.class2
不支持属性选择器
不支持相邻同胞选择器
不支持直接后代选择器
只支持伪类中的:link :visited :hover且只能用于锚元素。
- 建议使用单一文件样式表。多个文件会导致从服务器发送更多数据包，这些数据包会影响下载时间。
- CSS注释小tips，使用@gourp type定义样式表中的版式部分，通过搜素标志和注释头前几个字母进行查询。/* @gourp typography */
- ①设计css代码结构：
◎ 一般样式
□ 主题样式
□ reset样式
□ 链接
□ 标题
□ 其他元素
◎ 辅助样式
□ 表单
□ 通知和错误
□ 一致的条目
◎ 页面结构
□ 标题、页脚和导航
□ 布局
□ 其他页面结构元素
◎ 页面组件
□ 各个页面
◎ 覆盖
②代码结构：
/* @group general styles
----------------------------------------------------------------------*/
/* @group helper styles
----------------------------------------------------------------------*/
/* @group page structure
----------------------------------------------------------------------*/
/* @group page components
----------------------------------------------------------------------*/
/* @group overrides
----------------------------------------------------------------------*/
③添加css自我提示
/* @todo 表示东西需要以后进行修改、修复或复查 */
/* @workaround: 不完善的权宜之计*/
/* @bugfix: 表示代码或特定浏览器遇到的问题 */
④删除多余的注释，优化样式表。
网站发布是需要对样式和页面进行压缩。
第三章 可视化格式模型
- IE中怪异模式的盒模型：在这种非标准的盒模型中，浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度总和。
- IE6BUG：如果要相对于定位框的右边或底部设置绝对定位的框的位置，那么需要确保相对定位的框已经设置了尺寸。若果没有，IE会错误地相对于画布定位这个框。
- IE6中不支持固定定位，Jonathan Snook使用JavaScript在IE中重现这个效果。
- 清楚浮动的方法：
①定义overflow属性为hidden，利用这个属性会自动清理包含的任何浮动元素的副作用。（缺点：会影响滚动条或截断内容）
②结合:after伪类和内容声明在指定的现有内容末尾添加新的内容。（缺点：IE6、IE7不支持生成内容）
.clear:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
③Holly hack，迫使IE6拥有布局和错误地清理浮动元素。
④添加一个应用clear的元素。（缺点：可能会造成添加无意义的标记）
⑤使父元素也浮动。（缺点：浮动会对下一个元素造成影响）
第四章 背景图像效果
- 圆角框
①滑动门，会添加额外无语义元素。
②山顶角，使用位角蒙版（位图），对背景进行阻挡形成圆角。
③CSS3中定义多背景图像（用逗号分隔不同图片），实现滑动门效果。
④使用CSS3中border-radius属性，绘制圆角框。
⑤使用border-image设置图片边框。
- 投影
①使用一个阴影背景，然后利用负外边距或相对定位偏移图片，形成阴影效果。
②使用box-shadow属性，可设值：阴影类型、X轴位移、Y轴位移、阴影大小、阴影扩展、阴影颜色。
- 不透明度
①设置CSS3的opacity属性令背景半透明。
②IE9以下不支持CSS3的opacity，需要是使用滤镜。
延伸：CSS透明度大汇总
③使用RGBa的方法（同时设置背景色和背景色的透明度）：background-color:rgba(0,0,0,0.8);
④使用透明图片
- gif支持256色，全透明或全不透明（索引透明）。
- png8支持256色，全透明或全不透明（压缩性比gif好）。
- Png24/32支持多种色彩，有alpha透明（即可以半透明）。ie6不支持png的alpha透明，所以，需要调用
