《精通 CSS：高级 Web 标准解决方案（第2版）》笔记

《精通 CSS：高级 Web 标准解决方案（第2版）》
Andy Budd, Simon Collison, Cameron Moll 著
北京：人民邮电出版社
2010 年 5 月第 1 版

U1 基础知识

1. ID 用于标识页面上的特定元素（比如站点导航），而且必须是唯一的（只有在目标元素非常独特，绝不会对网站上其他地方别的东西使用这个名称时，才用 ID）；一个ID 名只能应用于页面上的一个元素，而同一个类名可以应用于页面上任意多个元素

2. 在分配 ID 和 类名 时，一定要尽可能保持名称与 表现方式 无关（应该根据“它们是什么”来为元素命名，而不应该根据“它们的外观如何”来命名）

3. 写类名和 ID 名时，需要注意区分大小写（作者推荐采用完全小写+-,eg:andy-budd而非andyBudd）

4. 解决“多类症”：类名+层叠（组件化）
   （如果发现自己添加了许多类，那么很可能意味着 HTML 文档的结构有问题）

5. 解决“多 div 症”：
   使用 div 根据条目的意义或功能（而不是根据它们的表现方式或布局）对相关条目进行分组

6. DTD（文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定半分钟允许有什么，不允许有什么
   浏览器通过分析页面的DOCTYPE声明来了解要使用哪个 DTD ，使用 HTML 的哪个版本

7. 有效性验证

• 在线验证
• bookmarklet/favelet（一小段可以存储在浏览器书签或收藏夹中的 JavaScript）（ps:最新的更新到2013？？？）
• 浏览器插件

U2 为样式找到应用目标

1. 选择器（特殊性：Style=""->1000；继承而来的样式特殊性为空）

• 类型选择器 / 元素选择器 / 简单选择器（0001）
• 后代选择器
• ID选择器（0100）
• 类选择器（0010）
• 伪类选择器（0010）
• 通用选择器（0000）
• 子选择器（0000）
  （后代选择器选择一个元素的所有后代，子选择器只选择元素的直接后代）
• 相邻同胞选择器（0000）
  （可定位同一个父元素某个元素之后的元素）
• 属性选择器（0010）

2. 可以通过将任何规则指定为 !important 来提高它的重要度，让它优先于任何规则

3. 层叠的重要度次序：

• 标有 !important 的用户样式
• 标有 !important 的作者样式
• 作者样式
• 用户样式
• 浏览器 / 用户代理应用的样式

4. 基本上，用style属性编写的规则总是比其他任何规则特殊。具有 ID 选择器的规则比没有 ID 选择器的额规则特殊，具有类选择器的规则比只有类型选择器的规则特殊。最后，如果两个规则的特殊性相同，那么后定义的规则优先。

5. 如果发现不得不多次覆盖一般样式，那么从更一般的规则中删除需要覆盖的声明，并且将它显式应用于需要它的每个元素，这样可能比较简单

6. 使用类标识页面类型，使用 ID 标识特定页面

7. 对文档应用样式（导入样式表比链接样式表慢）

• <link href="" type="text/css" />
• @import url();（分割为多个样式表）

8. 注释

• 设计代码的结构

    /* @group general styles
    --------------------------------------------------*/
    /*一般性样式：主体样式、reset样式、链接、标题、其他元素*/

    /* @group helper styles
    --------------------------------------------------*/
    /*辅助样式：表单、通知和错误、一致的条目*/

    /* @group page structure
    --------------------------------------------------*/
    /*页面结构：标题页脚和导航、布局、其他页面结构元素*/

    /* @group page components
    --------------------------------------------------*/
    /*页面组件：各个页面*/

    /* @group overrides
    --------------------------------------------------*/
    /*覆盖*/

• 自我提示（颜色查询表）

    /* @todo: 某些东西需要在以后进行修改、修复或查复 */
    /* @workaround: 并不完善的权宜之计 */
    /* @bugfix: 代码或特定浏览器遇到的问题 */

• 删除注释和优化样式表（减小文件大小：启用服务器压缩）
  在线CSS优化器、部署脚本

9. 模式组合：一个页面或一系列页面，它们使用当前的样式表显式站点上可能出现的每种样式排列组合
   回归测试：修改了旧代码后，重新进行测试以确认修改没有引入新的错误或导致其他代码产生错误

U3 可视化格式模型

1. 用通用选择器来设置边距为零的这种技术，不区分元素，对 option 等元素有不利影响
   使用全局 reset 更安全

2. 只有普通文档流中快框的垂直外边距才会发生外边距叠加
行内框、行内块、浮动框、绝对定位框之间的外边距不会叠加

3. 3种基本定位机制：普通流、浮动、绝对定位

• 相对定位实际上被看做普通流定位模型的一部分
• 绝对定位通过z-index来控制框的叠放次序（值越高，位置越高，默认0）
• 固定定位是绝对定位的一种

4. 匿名块框（无法直接对匿名块或行框应用样式，可使用:first-line伪元素）

5. clear 清理元素时，浏览器在元素顶上添加足够的外边距（ps:还是会有边距叠加现象），使元素的顶边缘垂直下降到浮动框下面

6. 使容器元素包围浮动元素

• 空 div 清理（ps: 似乎设定了div 的高度才起作用？？？）
• 浮动容器
• 容器overflow: hidden/auto;（触发 BFC）
• after伪元素清除浮动（ps：容器元素的 padding 不包括其中普通流元素的上边距）

// 百度、淘宝、网易
    .clear:after {
        content: '.';
        height: 0;
        visibility: hidden;
        display:block;
        clear: both;
    }
    .clear {
        *zoom: 1;   /*IE6/7*/
    }

• before和after双伪元素清除浮动

// 小米、腾讯
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table; /*BFC*/
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;   /*IE6/7*/
    }

• JavaScript 方法
  -书中对于“IE6和更低版本中不起作用”的 解决方法：Holly hack

----------------------------2019.1.8----------------------------

U9 bug 和修复 bug

1. 外边距叠加的绝大多数问题可以通过添加一点内边距或与元素背景颜色相同的小边框来修复
如果元素没有垂直边框或内边距，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部外边距就突出到容器的外边。
通过添加一个垂直边框或内边距，外边距就不再叠加了，而且元素的高度就是它包含的子元素的顶部和底部外边距边缘之间的距离。

# box {
  margin: 10px;
  padding: 1px;
  background-color: #d5d5d5;
}

p {
  margin: 20px;
  background-color: #69F;
}

----------------------------2019.1.11----------------------------