CSS权威指南（第三版）

css2 各章值得注意的点，“表”一章暂时未列

1

• html结构化语义化、css表现样式、层叠
• 替换元素、非可替换元素
• 行内元素、块元素
• 块可以包裹于行内之中，xml不可以
• 外联、内嵌、内联
• 解析器设计原则：以确定的实值为准

2

• 选择器：元素、类、ID、属性
• 文档结构选择器：后代、子
• 伪类、伪元素
  • p:frist-child的意思是各快内第一个p
  • p:frist-letter

3

• 权重
• 继承，有些属性不继承
• 层叠

4

• 数、百分比、颜色
• 像素、em是指依据父容器的fontsize为一个单位
• url、关键字

5

• 字体备选
• font-weight
• font-size
• text-decoration
• white-space

6

• text-indent:2em
• text-align
• line-height
• vertical-align
• word-spacing、letter-spacing

7

• 盒子模型：非可替换、可替换、块、行内
• 块-水平：
  • 子宽度总和等于父宽度
  • width、margin可以为auto，auto就是自动补全余下。
  • margin可以为负值
  • 替换元素的auto根据内容而定
• 块-垂直：
  • 默认高度由内容决定
  • auto：margin为0
  • height必须设置显式容器高度；
  • 负margin
  • 相邻垂直margin合并，以大的为准
  • list
• 行：
  • 非替换元素的padding、margin、border-width对“显示区域行”的高没有影响
  • 替换元素的会更改显示区域行的高度，但不会更改line-height。
  • 设置vertril-align为会更改显示区域的高度，不会更改line-height的值。
• iline-block相当于可替换行内元素

8

• 百分比：
  • width、height为容器的对应width、heigth
  • margin为容器的width
  • padding为容器的width

9

• transparent值
• color可以继承
• background-repeat
• background-position
• background-attachment

10

• 其他行内元素会环绕浮动元素；如果放得下一行（文本）内容，float脱离文本行位置依次浮动到左上，如果放不下float会另起一行。
• 浮动元素的margin不会合并
• clear
• position、包含块（absolute的包含块是最近的非static）
• 最大最小宽、高
• overflow
• clip:rect()
• z-index

11

12

• list-style-type
• list-style-image
• liststyleposition
• :after/:before
• content
• quotes
• counter

13

• 系统字体、颜色
• cursor
• outline
• 其他媒体、声音

与第8章有所关联 以下代码为何可以居中，其行为如何解释：

.a {
    position: aboslute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

图 7-16 的第一个示例有点懵逼，p 元素为什么有个上边距

如何确定表及其内部元素的大小： 回顾本章目录： 1、表的格式化 2、单元格的边框显示 3、如何确定表及其内部元素的大小 表的宽度：固定宽度布局、自动宽度布局 ［最显著的差异：速度。前者更快］ 表的高度：自定计算 . ／／表的宽度计算 table-layout: auto | fixed | inherit 对象：table inline-table 1、 表的宽度：固定布局 固定布局模型的速度之所以快，主要因为：布局不依赖于表单元格的内容。所有列的宽度都由表的第一行定义。 说明： （1）首行后所有的单元格不会改变列宽，这意味为这些table-cell指定的width值都会被忽略。如果一个table-cell放不下内容，裁剪or生成滚动条取决于overflow。 （2）其布局是依据：表＋列＋单元格width 值决定的 （3）使用固定宽度布局模型时，没必要非得为表指定一个显示宽度（当然，指定了width确实会由帮助） 2、 表的宽度计算：自动布局 这正是HTML表使用多年的模型 自动布局比较慢，是因为：在用户代理查看完表的所有内容之前，无法确定表的布局。每得到一个新单元格时，有可能触发新的一轮的宽度计算。只有完成最后一步，用户代理才算真正建立了表的布局。 疑惑：［？？］ （1）fixed布局的超出try （2）auto布局，当给col colgroup指定了width后，计算table的宽度，是否也会趋向于固定布局的效率？会快么？感觉还是取决于用户代理吧。。。？？ （3）在当前用户代理中，只要表的width:auto; 就会触发使用这个模型。而不论 table-layout的值是什么。但这也不能保证 ［那说个毛线啊。不过也是，那么多用户代理，谁又能保证呢。。。］ . ／／高度 确定表的宽度，花的功夫大了点。但是，高度的计算，相当简单。不过浏览器的开发人员可不这么认为。［哈哈，因为高度的计算交给用户代理去做了～］ 在2006年发布的CSS2.1草案中，将表的height看作是表框的最小高度。［而不是说只要指定了height 就貌似不用计算了］ . ／／对齐 水平对齐 text-align: 垂直对齐 vertical-align: top | bottom | middle | baseline 说明： 1、相对于单元格和行的高度，定义单元格中内容的对齐要容易得多～ 2、与垂直对齐行内内容是一样的，但应用到table-cell时值稍有变化。会忽略 text-top text-bottom sub super . ／／本章小结 1、虽然表布局使用起来很简单，但这种布局的机制相当复杂［或许也正是不应该滥用table布局的原因］ 2、由于HTML表构造的历史渊源，CSS表模型也是以行为中心的。 3、不过，它确实能提供列布局，还能应用有限的列样式。［？？此处不知。。］ 4、CSS提供了一些新特性来控制单元格对齐和表宽度，现在已有更多的工具已更漂亮的方式表示表。［新特性，比如奇偶行的样式控制］ 5、可以向任意元素应用和表相关的display值（传说当年除了ie，它还不支持）