精通CSS--高级 WEB 标准解决方案（第2版）学习笔记

1、元素应该使用 ID 还是类？

•  类应该应用于概念上相似的元素，这些元素可以出现在同一页面上的多个位置，如果你认为以后可能需要相似的元素，那就使用类。
• ID 应该应用于不同的唯一元素，只有在绝对确定这个元素只会出现一次的情况下，才应该使用 ID。                P7

2、 DIV 和 SPAN

• div 实际上代表部分（division），它可以将文档分割为几个有意义的区域。
• div 可以用来对块级元素进行分组
• span 可以用来对行内元素进行分组或标识。             P9

3、HTML 4.01、XHTML 1.0、XHTML 1.1的区别

• XHTML 1.0 和 HTML 4.01 之间的主要差异是它遵守 XML 编码约定。这意味着与常规的 HTML 不同，所有 XHTML 属性必须包含引号，所有元素必须是封闭的。
• XHTML 1.0 页面可以作为 HTML 文档，而 XHTML 1.1 页面是作为 XML 发送给浏览器的。            P13

4、文档类型、DOCTYPE 切换、浏览器模式

文档类型

          DTD（文档类型定义）是一组机器可读的规则，他们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD ，由此知道要使用 HTML 的哪个版本。

  DOCTYPE 当前有两种风格，严格（ strict ）和过渡（ transitional ）。过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本。

如果发送具有正确的 MIME 类型的 XHTML 文档，理解 XML 的浏览器将不显示无效的页面。

浏览器模式

         浏览器有两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

DOCTYPE 切换

对于 HTML 4.01 文档，

• 包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
• 包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
• 但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
• DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。 P13~P16

5、圆角框的滑动门技术          P60

6、不透明度

• CSS 不透明度：CSS 不透明度不仅对背景生效，而且对元素的内容生效。
• RGBa：RGBa 是一种同时设置颜色和不透明度的机制。其不透明度仅应用于背景颜色。
• PNG 透明度：PNG 文件格式最大的优点之一是它支持 alpha 透明度。                                      P73~P75

7、CSS 视差效果

          通过给不同层的元素添加背景图片，并设置 background-position 为百分数，在调整窗口大小时，形成多层背景移动的效果。P76

8、给链接添加背景图片以显示不同的含义

          通过给链接添加背景图片，以此来突出该链接是外部链接、内部链接、下载文档等，有助于改进用户在站点上的浏览体验。P89

9、菜单项上的斜面效果

          在菜单项上创建斜面效果：把顶边框设置得比背景颜色浅，让底边框深一点儿。P104

10、纯 CSS 下拉菜单及绝对定位 left: auto 的应用。

纯 CSS 下拉菜单

          将子导航嵌套在无序列表中，把列表定位到屏幕之外，然后当鼠标悬停在父列表项上时重新定位它。

绝对定位 left: auto

          如果将绝对定位的 left 、top 、 right （不包括 bottom ），如果其值是 auto ，该方向上的定位将相对于该元素未定位前本来该方向上的位置对其。（详细内容请参考《CSS 权威指南（第三版）》 P326）              P112

11、图片映射、远距离翻转

图片映射

          图像映射可以将图像的一些区域指定为热点，在鼠标悬停在这些热点上，出发一些效果。

远距离翻转

          远距离翻转是一种鼠标悬停事件，它在页面的其他地方触发显示方式的改变。实现的方法是：在锚链接内嵌套一个或多个元素；然后，使用绝对定位对嵌套的元素分别定位。尽管显示在不同的地方，但是他们都包含在同一个父锚中，所以可以对同一个鼠标悬停事件作出反应。因此，当鼠标悬停在一个元素上时，可以影响另一个元素的样式。

12、将表单元素与标签关联起来的两种方式。

<!--隐式方式-->
<label>email <input name="email" type="text" /></label>  

<!--显示方式-->
<label for="email">email</label>  
<input name="email" id="email" type="text" />

P140

13、固定宽度布局、流式布局、弹性布局

固定宽度布局

          布局时，元素的宽度尺寸用像素为单位来设置。

流式布局

          布局时，元素的宽度尺寸用百分数为单位来设置。

弹性布局

          布局时，容器的宽度尺寸用em为单位来设置。                    P163

14、流式和弹性图像

• 对于需要跨越大区域的图像，比如站点页眉或品牌区域中的图像，可以考虑使用背景图像而不是图像元素。
• 如果图像需要用作页面上的图像元素，那么将容器元素的宽度设置为 100% 并且将 overflow 属性设置为 hidden。
• 对于常规的内容图像，如果希望他们垂直和水平伸缩以避免被剪切，可以将图像元素添加到没有设置任何尺寸的页面上，然后设置图像的百分数宽度，并且添加与图像宽度相同的 max-width 以避免像素失真。（高度会随着宽度的变化而等比例变化）

15、没有垂直边框或内边距的元素其高度的计算方式

如果元素没有垂直边框或内边距，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。例如：

div {
	margin: 10px;
	background: #000;  /* 黑色 */
}
p {
	margin: 20px;
	background: #F00;  /* 红色 */
}

<div>
    <p>THIS PARAGRAPH HAS A 20PX MARGIN.</p>
</div>

以上代码的效果如下：

div 元素没有垂直边框和内边距，导致 div 的外边距与 p 的外边距合并，最终导致上图的效果。

解决方案：给 div 元素添加内边距或者边框，保证垂直外边距不叠加。

div {
	margin: 10px;
	background: #000;  /* 黑色 */
	padding: 1px;
}