CSS权威指南（第三版）

1、元素替换元素不是文档内容直接表示，典型的是img元素，另外还有input元素块级元素会和前后的元素隔开，而行内元素不会和前后的元素隔开块级元素不能出现在行内元素里2、link标记必须放在head里，其他位置会忽略link标记的media属性用的多的是all、screen和print，一个样式表可以设置多个媒体属性，用逗号连接document最初显示时只会使用rel为stylesheet的link标记rel定义为alternate stylesheet的为候选样式表（一般只有基于Gecko的浏览器支持）候选样式表定义相同的title，就可以把这些group到一起现在还有候选样式表的应用吗？？看firefox也没有看到，就当一个了解吧@import样式表出现在<style type="text/css">里面，必须放在其他规则之前，否则会被忽略网上看到的link和@import的区别，个人感觉最大的区别就是加载顺序的不同，其他影响不大

引入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引入

与第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-table1、表的宽度：固定布局固定布局模型的速度之所以快，主要因为：布局不依赖于表单元格的内容。所有列的宽度都由表的第一行定义。说明：（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，它还不支持）