CSS权威指南（第三版）

图 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，它还不支持）

表单元格边框：CSS中，有两种截然不同的边框模型：1、分隔边框模型：单元格相互之间是分隔的2、合并边框模型：单元格之间没有可见的间隔，单元格的边框会相互合并border-collapse: collapse | separate | inherit应用对象：table inline-table.／／separate 分隔单元格边框border-collapse: separate;border-spacing: 2px 10px; //设置单元格边框之间的间隔 ［有生效前提］empty-cells: show | hide | inherit ［对象 table-cell，有前提］［ie没支持，算了，忽略先］说明：分隔边框模型中，不能给这些设置border： tr tbody col colgroup。td可以设置border.／／collapse 合并单元格边框当 border-collapse: collapse 时，会有以下规则：1、table | inline-table 不能有 padding、可以有 margin2、border 可用于 td tr tbody col col-group，table本身也会有border3、table-cell 的边框之间肯定没有间隔，而且会合并成一个4、一旦合并，table-cell 之间的边框会在单元格间的假象线的中间位置。［是假想的线］说明：表的边框看起来是等宽的。所有的。或许，表的外边框已经超出了表的宽度 － 有一半落在了之外，不过模型就是这么定义的。边框的合并：是有比较的优先级的。.／／回想场景：1、separate 可以应用于 剧集的，1-2-3-4-5 等［对齐和留白、内容自适应还］2、collapse 中国好声音的那个页签［当内容过长时起码不会折行、边框］try：mac上chrome和safari的tr没有border。在window上试试再

表布局：本章介绍：CSS中表本身如何布局1、在视觉上如何组装（表格式化）2、绘制单元格边框的两种方式3、确定表及其内部元素的高度和宽度的机制表可以：一行中的所有单元格都等高；一列中的所有单元格都等宽。这种特殊性让表具有很多特殊的行为和规则。表布局很直接地让文档树中不同部分的元素相互影响大小和布局。.／／1、表格式化（table formating）：表中的元素相互之间的关系有助于理解：如何最佳地设置表样式（1）表元素：（2）内部表元素：有content padding border，但是没margin。除了总标题外。.／／表的编排规则表的编排规则：表格行、表格列、表格单元（矩形框 td th）1、每个行框包含一行单元表格。表中所有行框按照它在文档中出现的顺序从上到下填充表（表的标题行框 和 脚注行框例外，分别出现在表最前面和最后面）。所以，有多少个行元素，就有多少表格行2、行组包含多少个行框，该行组框就包含多少个表格单元3、列框包含一列｜多列表格单元。按顺序依次相邻放置。从左－右读、右－左读的语言。4、列组包含多少个列框，该列组框就包含多个表格单元5、单元格的跨多行｜跨多列，CSS并未对此做出定义，而是有文档语言来定义这种跨行｜跨列的。6、单元格框不能超出表｜行组的最后一个行框。.／／表显示值table display: tabletr display: table-row td,th display: table-cellthead display: table-head-grouptbody display: table-row-grouptfoot display: table-foot-groupcaption display: table-captioncol display: table-columncol-group display: table-column-groupCSS表模型是：面向行的（row primacy），以行为主的性质.／／CSS中的列 col 和列组 col-groupCSS中col和col-group只能接受4种样式：且有一些只能应用与列上下文的特殊规则时1、width：定义了列和列组的最小宽度。列｜列组中单元格的内容可能要求更宽。2、background：只有当td｜th｜tr有透明背景的时候，col和col-group的背景色才可见。3、border：只有当 border-collapse: collapse 时才能设置col col-group的边框［木有生效］4、visibility：如果列｜列组的visibility=collapse 则该列｜列组中所有单元格都不显示。此时，跨列的会被裁剪；表的总宽度会减去已被合并的宽度。［木有生效］.／／匿名表对象如果标记语言中没有包含足够的元素，以至于无法按照CSS的定义充分显示表。CSS定义了一组机制，将“遗漏”的组建作为匿名对象插入。其中CSS表模型中可能出现7种不同的匿名对象插入。.／／表层为了完成表的显示，CSS定义了6个不同的“层”，对应表的各个方面的样式都在其各自的层上进行绘制（这更多的只是个逻辑过程）。6、td th 单元格5、tr 行4、thead tbody tfoot 行组3、col 列2、col-group 列组1、table 表.／／表标题 caption-side: top|bottom