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
• 其他媒体、声音

引入css外部文件的两种方法为在html页面通过link，src属性（注意空链接时的陷阱！），再者是通过CSS文件本身通过@import url()引入，虽然这两种方式都可以加载进来CSS文件，可是link和@import也存在着细微的差别。 隶属上的差别 link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。此处注意浏览器的link src为空时候时会导致页面加载次数增多。 @import次数限制 传闻在IE6下，@import只能引入31次css文件，可是可以通过在css文件中再次import来垂直扩展，断桥残雪没有测试过，不过如果出现这样的情况，说明这个写代码的人也挺变态的。 加载顺序的不同 当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS文件会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显，@import这点跟把CSS文件放在页面结尾效果相同，不过如果我们一些样式开始页面并不会出现，而是在交互时才出现的CSS样式，可以通过这个方法引入，时间上错开。例如：Ajax的html，交互时的弹出框，弹出div等 兼容性上的差别 由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题（似乎影响不大~）。 使用DOM控制样式时的差别 当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。 所以，无特殊情况推荐使用link来引入样式，尽量避免使用@import，而如果进行Ajax或者交互的样式，则可以通过@import引入

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