来源：蜘蛛抓取(WebSpider)
时间：2017-09-05 12:16
标签：
js正则匹配img src
&a data-hash=&0b21747b1fec79ad8af7e68a2b1ff681& href=&///people/0b21747b1fec79ad8af7e68a2b1ff681& class=&member_mention& data-editable=&true& data-title=&@叛逆者& data-hovercard=&p$b$0b21747b1fec79ad8af7e68a2b1ff681&&@叛逆者&/a& 的debug技能说的非常好。针对其中“科学方法”一部分补充一下。原答案见此：&a href=&/question//answer/& class=&internal&&为什么 C++ 只比 VBA 快 4倍？ - grapeot 的回答&/a&&br&当时遇到的问题是一段C++程序速度非常慢。对于这样的情况，我们需要用科学的方法和适当的工具来找到问题的原因，而不是乱猜问题在哪里，随便改。具体地说，我们用了以下的方法：&br&&blockquote&我首先在VS2013, Release模式下面跑了一下C++代码，时间是208ms。基本重现了C++部分的结果。这个速度的确不能算快。在我们推测具体原因以前，一定一定要先profile，看看每一行所花费的时间是多少（不成熟的优化是万恶之源）。在VS里这个非常简单（要求VS Ultimate，但一般订阅了MSDN AA的学校都有免费的VS Ultimate）。只要点一个按钮就好了，如下图所示。&br&&br&&img src=&/71defeceb1a_b.jpg& data-rawwidth=&557& data-rawheight=&214& class=&origin_image zh-lightbox-thumb& width=&557& data-original=&/71defeceb1a_r.jpg&&&br&出来的结果类似：&br&&br&&img src=&/fe88c0cc0b31_b.jpg& data-rawwidth=&1181& data-rawheight=&707& class=&origin_image zh-lightbox-thumb& width=&1181& data-original=&/fe88c0cc0b31_r.jpg&&&br&我们可以看到，如 @姚冬 所说，rand()占用了56.3%的时间，是性能的瓶颈。此外，整数的减法也占用了33.4%的时间。&br&&br&知道了原因以后就好办了。第一步，放狗搜索c++ slow rand。出来一大坨结果。其中一个是&br&&a href=&///?target=http%3A///questions/1640258/need-a-fast-random-generator-for-c& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Need a fast random generator for c++&i class=&icon-external&&&/i&&/a&&br&里面提供了一个快速的rand()实现。把代码粘进去。&br&&div class=&highlight&&&pre&&code class=&language-text&&unsigned int g_seed = 0;
unsigned int fastrand() {
g_seed = (214013 * g_seed + 2531011);
return (g_seed && 16) & 0x7FFF;
&/code&&/pre&&/div&瞬间提速1倍到了99ms，结果不变。再profile得到：&br&&img src=&/dae918da140cd_b.jpg& data-rawwidth=&1178& data-rawheight=&598& class=&origin_image zh-lightbox-thumb& width=&1178& data-original=&/dae918da140cd_r.jpg&&一个诡异的地方是这是个整数运算应该极其快，而且不应该有类型转换在里面。但是profiler说50%的时间都在float到long的类型转换上面（注意图片右上角）。进一步检查发现，rand_max怎么是double。改成int，结果不变，时间变成43ms，进一步提速2倍。再profile得到：&br&&img src=&/a3a5bddc1058afe05c06_b.jpg& data-rawwidth=&1192& data-rawheight=&682& class=&origin_image zh-lightbox-thumb& width=&1192& data-original=&/a3a5bddc1058afe05c06_r.jpg&&&br&这时候我们可以看到时间非常平均，也没有明显瓶颈了。优化结束。&br&考虑到我们机器的不同，我的43ms大约相当于你的机器的31ms，相比于vba的570ms有了18倍的性能差异，感觉还是比较合理的。&br&&br&几点讨论：&br&&ul&&li&其实在这个回答里，核心并不是程序优化的具体技巧，而是拿到一个问题如何思考和利用工具的通用方法。比如即使我们不知道profiler这个东西，通过搜索&代码 每一行 时间&也可以很快知道有这样的工具叫做profiler，并且学会怎么使用。即使不知道rand这个函数怎么加速，通过搜索引擎也可以找到别人写好的现成代码。另一方面是发现瓶颈之后也不要着急自己修复，如果不是特别一目了然的话，先看看别人是怎么做的。站在巨人的肩膀上，事半功倍。所以关键在于时刻知道自己想要的是什么，和分析－调研－实验的思维习惯。&/li&&li&具体关于程序优化，我们绝大多数人没有 @姚冬 那么牛的经验，一眼就能看出问题在哪里。所以遇到性能问题，第一反应应当是用profiler看看瓶颈到底在哪。而且一个经验是这个瓶颈往往是很难猜的——比如这个例子直接看代码第一反应往往是用代数和工程方法去优化算半径的那部分。但就算这部分做到极致，rand速度提不上去，最多也只能把时间降到原来的一半，事倍功半。以前我写代码也会在写的时候用各种奇技淫巧提升速度，但后来发现总体上程序的速度并没有得到提升。因为程序80％的时间其实花在20％的代码里，剩下80％的代码就算花个两个月优化到速度无穷快，也还是白瞎。所以一个兼顾开发和运行效率的方法是，先怎么方便开发怎么写，然后用profiler找到瓶颈再有针对性地优化。&/li&&li&前两点不仅可以节省时间，可能更重要的是，如果你面对的不仅是一个工程，而且是老板，你要说服老板你这么做的原因。这些profile的结果、别人的讨论、你自己的实验结果，都会1) 说服老板你这么做是对的，2) 给老板留下深刻印象：你干了很多事，脑子清楚。以后升迁啥的都有帮助。&br&&/li&&li&不懂的问题上知乎问！这也是非常重要的一部分。&/li&&li&上面用的是Windows平台的VS，方便好用但也非常贵。如果是Linux平台下可以用gprof（不晓得有没有GUI版本的，望指教）。Mac下可以用XCode。但基本思路都是一样的。&/li&&/ul&&/blockquote&
的debug技能说的非常好。针对其中“科学方法”一部分补充一下。原答案见此： 当时遇到的问题是一段C++程序速度非常慢。对于这样的情况，我们需要用科学的方法和适当的工具来找到问题的原因，而不是乱…
&p&答案很简单，因为网上说的是错的。&/p&&p&React.js 的算法本质上是重刷视图，相当于设置 innerHTML，只不过它设置的是内存里面 Virtual-DOM，而不是真实的 DOM。你要是拿它和真实的 innerHTML 比那肯定是 React.js 更快。&/p&&p&但实际上我们并不会这么成片成片地通过 innerHTML 去更新视图（你要是用 Backbone.js 我无话可说），而更多的是精细化地一个数据对应一个 DOM 去更新（例如用jQuery）。假设数据变化对应的手动 DOM 操作都是尽可能一一对应的（最小化 DOM 操作），那么 React.js 对比我们手动操作 DOM 来说毫无性能可言，因为在得到最小化的 DOM 操作结果之前你还有一个 diff 算法。&/p&&p&React.js 厉害的地方并不是说它比 DOM 快（这句话本来就是错的），而是说不管你数据怎么变化，我都可以以最小的代价来更新 DOM。方法就是我在内存里面用新的数据刷新一个虚拟的 DOM 树，然后新旧 DOM 树进行比较，找出差异，再更新到真正的 DOM 树上。&/p&&p&这就是所谓的 diff 算法，虽然说 diff 算法号称算法复杂度 O(n) 可以得到最小操作结果，但实际上 DOM 树很大的时候，遍历两棵树进行各种对比还是有性能损耗的，特别是我在顶层 setState 一个简单的数据，你就要整棵树 walk 一遍，而真实中我可以一句 jQuery 就搞定，所以就有了 `shouldComponentUpdate` 这种东西。&/p&&p&而且不管 Vue 还是 React.js 它们的列表对比算法都不是最优算法，最优算法是 &a href=&///?target=https%3A//en.wikipedia.org/wiki/Levenshtein_distance%23Computing_Levenshtein_distance& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Levenshtein distance&i class=&icon-external&&&/i&&/a& 动态规划，算法复杂度 O(n^2)，React.js 接受不了，就搞了一个简单的 O(n) 版本的。所以在某些情况下即使带了 `key`，也可能带上了不必要的元素移动操作（对比最优算法而言），所以它号称最小的 DOM 操作其实也是有点瑕疵的。&/p&&p&对比人肉版本的手工最小 DOM 操作，React.js 无疑是输家，diff 性能有损耗，也不是所有情况都是最小 DOM 操作。但是胜在方便，一切都是 trade off。&/p&&p&所以说，同学们，不要见的风就是雨啊，老想搞个大新闻。&/p&
答案很简单，因为网上说的是错的。React.js 的算法本质上是重刷视图，相当于设置 innerHTML，只不过它设置的是内存里面 Virtual-DOM，而不是真实的 DOM。你要是拿它和真实的 innerHTML 比那肯定是 React.js 更快。但实际上我们并不会这么成片成片地通过 inn…
&img src=&/v2-ff69639abd00ebddf65a_b.png& data-rawwidth=&750& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-ff69639abd00ebddf65a_r.png&&&p&这是一篇译文，对 inline 和 inline-block 的元素剖析非常给力。&/p&&p&原文：&a href=&/?target=http%3A//iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira&i class=&icon-external&&&/i&&/a&&br&&/p&&p&--------------&/p&&p&line-height 和 vertical-align 都是简单的 CSS 属性，以致于大多数人自以为知道这两个属性的工作原理。但实际上这两个属性非常复杂，也许算得上是 CSS 里最难的两个属性，因为这两个属性和 CSS 里一个鲜为人知的特性息息相关：内联格式化上下文（IFC）（译者注：和 BFC 相对应）。&/p&&p&举例来说，line-height 的值可以是一个长度（length）或者是一个数字，它的默认值是 normal。那么，normal 是什么呢？我们经常将 normal 理解为 1，或者 1.2，甚至连 CSS 规格文档都&a href=&/?target=https%3A//www.w3.org/TR/CSS2/visudet.html%23propdef-line-height& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&没有提到这一问题&i class=&icon-external&&&/i&&/a&。我们知道 line-height 的值为数字时，表示的相对于 font-size 的倍数，但问题在于，font-size:100px 对应的文字在不同字体里的高度是不一样的！那么 line-height 会随着文字大小的改变而改变吗？ normal 真的表示 1 或者 1.2 吗？vertical-align 又是如何被 line-height 影响的呢？&/p&&p&让我们来深入理解一个不那么简单的 CSS 机制。&/p&&h1&font-size&/h1&&p&下面是一段简单的 HTML 代码，一个 p 标签包含了 3 个 span 标签，每个 span 各自有一个 font-family：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&p&
&span class=&a&&Ba&/span&
&span class=&b&&Ba&/span&
&span class=&c&&Ba&/span&
&/code&&/pre&&/div&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&p
{ font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo
.c { font-family: Catamaran }
&/code&&/pre&&/div&&p&（译者注：这几款字体你的电脑上可能没有）&/p&&p&font-size 相同，font-family 不同，得到的 span 元素的高度也不同：&/p&&img src=&/v2-ff69639abd00ebddf65a_b.png& data-rawwidth=&750& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-ff69639abd00ebddf65a_r.png&&&br&&p&为什么 font-size: 100px 不能得到相同高度的元素呢？我测量了一下每个 span 的高度：Helvetica 115px，Gruppo 97px，Catamaran 164px。&br&&/p&&img src=&/v2-c563ed710da734f52f33e7e_b.png& data-rawwidth=&750& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-c563ed710da734f52f33e7e_r.png&&&p&乍看很奇怪，但是仔细想想，这么做又是很有道理的。原因在于字体本身，这是字体的原理：&/p&&br&&ul&&li&一款字体会定义一个 &a href=&/?target=http%3A///zh-CN/The_EM_Square.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&em-square&i class=&icon-external&&&/i&&/a&，它是用来盛放字符的金属容器。这个 em-square 一般被设定为宽高均为 1000 相对单位，不过也可以是
相对单位。&/li&&/ul&&img src=&/v2-4cddb_b.png& data-rawwidth=&590& data-rawheight=&341& class=&origin_image zh-lightbox-thumb& width=&590& data-original=&/v2-4cddb_r.png&&&br&&ul&&li&字体度量都是基于这个相对单位设置的，包括 ascender、descender、capital height、x-height 等。注意这里面的值是允许相对于 em-square 出血（bleed outside）的（译者注：大概可以理解为超出 em-square）&/li&&/ul&&img src=&/v2-7f1590fecc2fe2869d83b_b.jpg& data-rawwidth=&338& data-rawheight=&149& class=&content_image& width=&338&&&br&&ul&&li&在浏览器中，上面的 1000 相对单位会按照你需要的 font-size 缩放。&/li&&/ul&&p&我们把 Catamaran 字体放到 &a href=&/?target=https%3A//fontforge.github.io/en-US/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&FontForge&i class=&icon-external&&&/i&&/a& 中，分析它的字体度量：&/p&&br&&ul&&li&em-square 是 1000&/li&&li&ascender 是 1100，descender 是 540。通过测试发现，macOS 上的浏览器使用了 HHead Ascent 和 HHead Descent 值，Windows 上的浏览器使用了 Win Ascent 和 Win Descent（而且两个平台上的值不一样）。我们还看到 Capital Height 是 680，X height 是 485。&/li&&/ul&&img src=&/v2-8fa5fa46b571db21c79bda208d6263c3_b.png& data-rawwidth=&750& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-8fa5fa46b571db21c79bda208d6263c3_r.png&&&p&这意味着 Catamaran 字体占据了 1100 + 540 个相对单位，尽管它的 em-square 只有 1000 个相对单位，所以当我们设置 font-size:100px 时，这个字体里的文字高度是 164px。&strong&这个计算出来的高度决定了 HTML 元素的 content-area（内容区域）&/strong&，后面我会讲到 content-area。你可以认为 content-area 就是 background 作用的区域。&/p&&br&&p&我们还能看出大写字母的高度是 68px，小写字母的高度（x-height）是 49px。所以 1ex = 49px，1em = 100px，而不是 164px。（真好，em 是基于 font-size，而不是基于计算出来的高度）&/p&&img src=&/v2-cb05dd4dcf6_b.png& data-rawwidth=&750& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-cb05dd4dcf6_r.png&&&p&在继续深入之前，说点相关的知识。当 p 元素出现在屏幕上时，它可能包含了多行内容，每行内容由多个内联元素组成（内联标签或者是包含文本的匿名内联元素），每一行都叫做一个 line-box。&strong&line-box 的高度是由它所有子元素的高度计算得出的&/strong&。浏览器会计算这一行里每个子元素的高度，再得出 line-box 的高度（具体来说就是从子元素的最高点到最低点的高度），所以默认情况下，一个 line-box 总是有足够的高度来容纳它的子元素。&/p&&blockquote&&p&每个 HTML 元素实际上都是由多个 line-box 的容器，如果你知道每个 line-box 的高度，那么你就知道了整个元素的高度。&/p&&/blockquote&&p&如果我们修改一下最初的 HTML 代码：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&p&
Good design will be better.
&span class=&a&&Ba&/span&
&span class=&b&&Ba&/span&
&span class=&c&&Ba&/span&
We get to make a consequence.
&/code&&/pre&&/div&&p&那么就会得到 3 个 line-box（宽度固定）：&/p&&br&&ul&&li&第一行和最后一行各有一个匿名内联元素（文本内容）&/li&&li&中间一行包含两个匿名内联元素和三个 span&/li&&/ul&&img src=&/v2-cc56cc3f3cf_b.png& data-rawwidth=&750& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-cc56cc3f3cf_r.png&&&p&我们清楚地看到第二个 line-box 比其他两个要高一些。因为第二行里面的子元素因为有一个用到了 Catamaran 字体的 span。&/p&&p&line-box 的难点在于我们看不见它，而且不能用 CSS 控制它。即使我们用 ::first-line 给第一行加上背景色，我们也看不出第一个 line-box 的高度。&/p&&h1&line-height&/h1&&p&目前我已经提到了两个概念：content-area 和 line-box。如果你仔细看了，会发现我说 line-box 的高度是根据子元素的高度计算出来的，而不是子元素的 content-area 的高度。这个区别大了。&/p&&p&接下来说句听起来很奇怪的话：一个内联元素有两个高度：content-area 高度和 virtual-area （实际区域？）高度（virtual-area 是我自己发明的单词，它表示对人类有效的高度，你在其他地方是看不到这个单词的）。&/p&&br&&ul&&li&content-area 的高度是由字体度量定义的（见上文）&/li&&li&vitual-area 的高度就是 line-height，这个高度用于计算 line-box 的高度&/li&&/ul&&img src=&/v2-efe30b60d553cbcbdebb240b_b.png& data-rawwidth=&750& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-efe30b60d553cbcbdebb240b_r.png&&&p&这么一来，这就打破了一个长久的谣言：line-height 表示两个 baseline 之间的距离。在 CSS 里，不是这样的。&br&&/p&&img src=&/v2-ebf7d2dfcbb995c4a2cfc7fa_b.png& data-rawwidth=&750& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-ebf7d2dfcbb995c4a2cfc7fa_r.png&&&p&virtual-area 和 content-area 高度的差异叫做 leading。leading 的一半会被加到 content-area 顶部，另一半会被加到底部。因此 content-area 总是处于 virtual-area 的中间。&/p&&p&计算出来的 line-height（也就是 virtual-area 的高度）可以等于、大于或小于 content-area。如果 virtual-area 小于 content-area，那么 leading 就是负的，因此 line-box 看起来就比内容还矮了。&/p&&p&还有一些其他种类的内联元素：&/p&&ul&&li&可替换的内联元素，如 img / input / svg 等&/li&&li&inline-block 元素，以及所有 display 值以 inline- 开头的元素，如 inline-table / inline-flex&/li&&li&处于某种特殊格式化上下文的内联元素，例如 flexbox 元素中的子元素都处于 &a href=&/?target=https%3A//www.w3.org/TR/css-flexbox-1/%23flex-items& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&flex formatting context（弹性格式化上下文）&i class=&icon-external&&&/i&&/a&中，这些子元素的 display 值都是「blockified」&/li&&/ul&&p&这类内联元素，其高度是基于 height、margin 和 border 属性（译者注：好像漏了 padding）。如果你将其 height 设置为 auto 的话，那么其高度的取值就是 line-height，其 content-area 的取值也是 line-height。&/p&&img src=&/v2-924bff1c6ccda3bec78123_b.png& data-rawwidth=&750& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-924bff1c6ccda3bec78123_r.png&&&p&我们目前依然没有解释 line-height:normal 是什么意思。要解答这个问题，我们又得回到 content-area 高度的计算了，问题的答案就在字体度量里面。&/p&&br&&p&我们回到 FontForge，Catamaran 的 em-square 高度是 1000，同时我们还看到很多其他的 ascender/descender 值：&/p&&img src=&/v2-8fa5fa46b571db21c79bda208d6263c3_b.png& data-rawwidth=&750& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-8fa5fa46b571db21c79bda208d6263c3_r.png&&&ul&&li&常规的 Ascent/Descent：ascender 是 770，descender 是 230，用于渲染字符。&/li&&li&规格 Ascent/Descent：ascender 是 1100，descender 是 540。用于计算 content-area 的高度&/li&&li&规格 Line Gap：用于计算 line-height: normal。&/li&&/ul&&p&在 Catamaran 这款字体中，Line Gap 的值是 0，那么 line-height: normal 的结果就跟 content-area 的高度一样，是 1640 相对单位。&/p&&p&为了对比，我们再看看 Arial 字体，它的 em-square 是 2048，ascender 是 1854，descender 是 434，line gap 是 67。那么当 font-size: 100px 时，&/p&&ul&&li&其 content-area 的高度就是 100/+434) = 111.72，约为 112px；&/li&&li&其 line-height: normal 的结果就是 100/4+434) 约为 115px。&/li&&/ul&&p&所有这些值都是由字体设计师设置的。&/p&&br&&p&这么看来，line-height:1 就是一个很糟糕的实践。记得吗，当 line-height 的值是一个数字时，其实就是相对 font-size 的倍数，而不是相对于 content-area。所以 line-height:1 很有可能使得 virtual-area 比 content-area 矮，从而引发很多其他的问题。&/p&&img src=&/v2-01f0ec3f893c4cfc304e5_b.png& data-rawwidth=&750& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-01f0ec3f893c4cfc304e5_r.png&&&p&不仅仅是 line-height:1 有问题，我电脑上的 1117 款字体中，大概有 1059 款字体的 line-height 比 1 大，最低的是 0.618，最高的是 3.378。你没看错，是 3.378！&/p&&p&line-box 计算的一些细节：&/p&&ul&&li&对于内联元素，padding 和 border 会增大 background 区域，但是不会增大 content-area（不是 line-box 的高度）。一般来说你无法再屏幕上看到 content-area。margin-top 和 margin-bottom 对两者都没有影响。&/li&&li&对于可替换内联元素（replaced inline elements）、inline-block 元素和 blockified 内联元素，padding、margin 和 border 会增大 height（译者注：注意 margin），因此会影响 content-area 和 line-box 的高度&/li&&/ul&&h1&vertical-align&/h1&&p&我还没提过 vertical-align 属性，它也是计算 line-box 高度的重要因素之一。我们甚至可以说 vertical-align 是内联格式化上下文（IFC）中最重要的属性。&/p&&p&它的默认值是 baseline。还记得字体度量里的 ascender 和 descender 吗？这两个值决定了 baseline 的位置。很少有&/p&&p&字体的 ascender 和 descender 的比例是一比一的，所以我们经常看到一些意想不到的现象，下面是例子。&/p&&p&代码如下：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&p&
&span&Ba&/span&
&span&Ba&/span&
&/code&&/pre&&/div&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&p {
font-family: C
font-size: 100
line-height: 200
&/code&&/pre&&/div&&br&&p&一个 p 标签内有两个 span 标签，span 继承了 font-family、font-size 和 200px 的 line-height。这时两个 span 的 baseline 是等高的，line-box 的高度就是 span 的 line-height。&/p&&img src=&/v2-4a182cd5a309f5b689c95ca730c0ae4f_b.png& data-rawwidth=&750& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-4a182cd5a309f5b689c95ca730c0ae4f_r.png&&&p&如果第二个 span 的 font-size 变小了呢？&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&span:last-child {
font-size: 50
&/code&&/pre&&/div&&br&&p&我们会发现一个非常奇怪的现象，line-box 的高度变高了！如下图所示。提示你一下，line-box 的高度是从子元素的最高点到最低点的举例。&/p&&img src=&/v2-d310ad9fcf11dee3f20ab_b.png& data-rawwidth=&750& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-d310ad9fcf11dee3f20ab_r.png&&&p&这个例子可以作为「&a href=&/?target=http%3A////nope-nope-nope-line-height-is-unitless/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&应该将 line-height 的值写成数字&i class=&icon-external&&&/i&&/a&」的论据，但是有时候我们为了做出好看的排版，必须把 line-height 写成一个固定值。&/p&&p&&strong&不过我实话告诉你吧，不管你把 line-height 写成什么，你都会在对齐内联元素的时候遇到麻烦。&/strong&&/p&&p&我们来看另一个例子。p 标签有 line-height:200px，内含一个 span，span 继承了 p 的 line-height。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&p&
&span&Ba&/span&
&/code&&/pre&&/div&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&p {
line-height: 200
font-family: C
font-size: 100
&/code&&/pre&&/div&&p&此时 line-box 的高度是多少？貌似是 200px，但其实不是。这里你没有考虑到的问题是 p 有自己的 font-family，默认值是 serif。p 的 baseline 和 span 的 baseline 位置不一样，因此最终的 line-box 比我们预想的要高一些。出现这种问题是因为浏览器认为每个 line-box 的起始位置都有一个宽度为 0 的字符（CSS 文档将其称为 strut），并将其纳入 line-box 的高度的计算中。&/p&&blockquote&&p&看不见的字符，看得见的影响。&/p&&/blockquote&&br&&p&为了说明这个问题，我们画图解释一下这个问题。&/p&&img src=&/v2-fb35a12dea987bae3bff0_b.png& data-rawwidth=&750& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-fb35a12dea987bae3bff0_r.png&&&p&用 baseline 来对齐令人费解，如果我们用 vertical-align: middle 会不会好一点呢？读 CSS 文档你会发现，middle 的意思是「用父元素 baseline 高度加上父元素中 x-height 的一半的高度来对齐当前元素的垂直方向的中点」。baseline 所处的高度跟字体有关，x-height 的高度也跟字体有关，所以 middle 对齐也不靠谱。更糟糕的是，一般来说，middle 根本就不是居中对齐！内联元素的对齐受太多因素影响，因此不可能用 CSS 实现。&/p&&p&顺便一说，vertical-align 的其他 4 个值有可能有点用：&/p&&br&&ul&&li&vertical-align: top / bottom，表示与 line-box 的顶部或底部对齐&/li&&li&vertical-align: text-top / text-bottom，表示与 content-area 的顶部或底部对齐&/li&&/ul&&p&&img src=&/v2-c7a2dd7fd323bd9e98ccf5_b.png& data-rawwidth=&750& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-c7a2dd7fd323bd9e98ccf5_r.png&&不过你依然要小心，大部分情况下，对齐的是 virtual-area，也就是一个不可见的高度。看看下面这个用 vertical-align:top 的例子：&br&&/p&&img src=&/v2-c72edc431fa40ef60ab7a53d_b.png& data-rawwidth=&750& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-c72edc431fa40ef60ab7a53d_r.png&&&p&最后，vertical-align 的值也可以是数字，表示根据 baseline 升高或降低，不到万不得已还是别用数字吧。&/p&&h1&CSS is awesome&/h1&&p&我们讨论了 line-height 和 vertical-align 如果互相影响，现在问题来了：CSS 可以控制字体度量吗？简单来说答案是：不行。我也很想用 CSS 来控制字体。无论怎样，我还是想试试。字体度量只是一些固定的值而已，我们应该可以围绕它做点什么。&/p&&p&比如说，我们想要一段文字使用 Catamaran 字体，同时大写字母的高度正好是 100px，看起来可以实现，我们只需要一些数学知识。&/p&&p&首先我们把所有字体度量设置为 CSS 自定义属性，然后计算出一个 font-size，让大写字母的高度正好是 100px。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&p {
/* font metrics */
--fm-capitalHeight: 0.68;
--fm-descender: 0.54;
--fm-ascender: 1.1;
--fm-linegap: 0;
/* desired font-size for capital height */
--capital-height: 100;
/* apply font-family */
font-family: var(--font);
/* compute font-size to get capital height equal desired font-size */
--computedFontSize: (var(--capital-height) / var(--fm-capitalHeight));
font-size: calc(var(--computedFontSize) * 1px);
&/code&&/pre&&/div&&img src=&/v2-af3ab90d9cabf93d390d63_b.png& data-rawwidth=&750& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-af3ab90d9cabf93d390d63_r.png&&&p&看起来也并不复杂不是吗？如果我们想要文字垂直居中怎么办呢？也就是让 B 上面的空间和下面的空间高度一样。为了做到这一点，我们必须要根据 ascender 和 descender 的比例来计算 vertical-align。&/p&&p&首先计算出 line-height:normal 的值和 content-area 的高度：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&p {
--lineheightNormal: (var(--fm-ascender) + var(--fm-descender) + var(--fm-linegap));
--contentArea: (var(--lineheightNormal) * var(--computedFontSize));
&/code&&/pre&&/div&&p&然后我们需要计算：&/p&&ul&&li&B 下面空间的高度&/li&&li&B 上面空间的高度&/li&&/ul&&p&像这样：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&p {
--distanceBottom: (var(--fm-descender));
--distanceTop: (var(--fm-ascender) - var(--fm-capitalHeight));
&/code&&/pre&&/div&&p&然后我们就可以计算 vertical-align 的值。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&p {
--valign: ((var(--distanceBottom) - var(--distanceTop)) * var(--computedFontSize));
vertical-align: calc(var(--valign) * -1px);
&/code&&/pre&&/div&&p&最后，设置 line-height：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&p {
/* desired line-height */
--line-height: 3;
line-height: calc(((var(--line-height) * var(--capital-height)) - var(--valign)) * 1px);
&/code&&/pre&&/div&&img src=&/v2-86b09b1ecc3a6c745bcb2d096e8edeec_b.png& data-rawwidth=&750& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-86b09b1ecc3a6c745bcb2d096e8edeec_r.png&&&p&添加一个和 B 一样高的 icon 就很容易了：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&span::before {
content: '';
display: inline-
width: calc(1px * var(--capital-height));
height: calc(1px * var(--capital-height));
margin-right: 10
background: url('https://cdn.pbrd.co/images/yBAKn5bbv.png');
background-size:
&/code&&/pre&&/div&&img src=&/v2-58a9abc632cd_b.png& data-rawwidth=&750& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-58a9abc632cd_r.png&&&p&&a href=&/?target=http%3A///tufatir/edit%3Fcss%2Coutput& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JSBin 效果演示&i class=&icon-external&&&/i&&/a&&/p&&p&注意这只是为了演示，请不要在生产环境中使用此方案。&/p&&h1&结论&/h1&&p&我们知道了：&/p&&ul&&li&IFC 真的很难懂&/li&&li&所有的内联元素都有两个高度&ul&&li&基于字体度量的 content-area&/li&&li&virtual-area（也就是 line-height ）&/li&&li&这两个高度你都无法看到&/li&&/ul&&/li&&li&line-height: normal 是基于字体度量计算出来的&/li&&li&line-height: n (n=1,2,3…) 可能得出一个比 virtual-area 还要矮的 content-area&/li&&li&vertical-align 不靠谱&/li&&li&line-box 的高度的受其子元素的 line-height 和 vertical-align 的影响&/li&&li&我们无法轻易的用 CSS 来控制字体度量&/li&&/ul&&br&&p&但是我依然喜欢 CSS ：）&/p&
这是一篇译文，对 inline 和 inline-block 的元素剖析非常给力。原文： --------------line-height 和 vertical-align 都是简单的 CSS 属性，以致于大多数人自以为知道…
这个skew的默认transform-origin是这个物件的中心点，所以题主你的补充说明里的图，坐标轴的中心点应该是在方块的中心。&br&skew确实有拉伸的效果&br&可以参见这三幅图（&a href=&///?target=http%3A///transform/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&transform: All the CSS3 properties explained&i class=&icon-external&&&/i&&/a&）&br&&img src=&/8dacd2b86af3e02b5d0b_b.jpg& data-rawwidth=&159& data-rawheight=&115& class=&content_image& width=&159&&这是skewX(30deg)&br&&img src=&/f167d8c6eb_b.jpg& data-rawwidth=&122& data-rawheight=&119& class=&content_image& width=&122&&skewY(30deg)&br&加在一起的效果就是&br&&img src=&/0bfc4a49fe0e0e7c801f5_b.jpg& data-rawwidth=&169& data-rawheight=&121& class=&content_image& width=&169&&&br&题主你拿纸笔画一下就更清楚了
这个skew的默认transform-origin是这个物件的中心点，所以题主你的补充说明里的图，坐标轴的中心点应该是在方块的中心。 skew确实有拉伸的效果 可以参见这三幅图（） 这是skewX(30deg) skewY(30deg) 加在一起…
&p& 计算机科学中，有一门基础课程叫做数据结构。它是专门研究现实世界中，物体之间的关系，以及这种关系在计算机中是如何存储的。通俗讲，就是把现实世界中物与物之间的关系弄到计算机里面去，只有弄进去了，才有可能通过计算机科学的方法研究它们。物与物相互之间的关系，就构成了一种结构。在计算机科学中，是用数据来表示物体的，因此，这种数字化了的物体之间的结构，又叫做数据的结构。&/p&&p&
树，便是一种重要的数据结构。任何一本讲数据结构的著作，都会有一个完整的章节来讲树。这种结构一般如下图所示，&br&&img src=&/v2-c3bfd841e1ccdb3426efdd_b.jpg& data-rawwidth=&260& data-rawheight=&214& class=&content_image& width=&260&&但是，按我的理解，应该是翻过来的。即，这样&/p&&img src=&/v2-182c7cd5ce159537aef13_b.jpg& data-rawwidth=&260& data-rawheight=&214& class=&content_image& width=&260&&&br&&p&为什么会有这种数据结构，现实生产生活中，肯定有类似的问题存在。比如，钻山洞，是溶洞那种山洞。&br&&img src=&/v2-f5796462badc95365def50a8_b.jpg& data-rawwidth=&850& data-rawheight=&520& class=&origin_image zh-lightbox-thumb& width=&850& data-original=&/v2-f5796462badc95365def50a8_r.jpg&&&/p&&p&在洞中有很多分叉，在毎一个叉点，都有好几种去路供判断选择。但是，如果想退回洞口，就只有一条路可走。树，其实描述的就是这一类问题，去向有很多选择，但退回，只有一条路可走。因此，与其将这种数据结构叫做树，还不如叫做“洞”。&br&&img src=&/v2-66b8e9dec90d00f30e74cf_b.jpg& data-rawwidth=&793& data-rawheight=&612& class=&origin_image zh-lightbox-thumb& width=&793& data-original=&/v2-66b8e9dec90d00f30e74cf_r.jpg&&&/p&&p&现实中，没有那么多洞可钻，也没那么多人爱钻洞。计算机科学这么重视这种结构，肯定有更广泛的存在。&/p&&p&是的，太广泛了，它其实描述的是人生。&br&&br&&/p&&p&在我们人的一生，或者截取任何一个片段。毎到一个节点，都有0,1或者若干种选择，但是如果回头望，我们走过的，却只有一条路径，这就是我们的经历。&/p&&p&比如，我的一个朋友，这些来在一些节点经历了选择。文理分科，选理科；高考专业，选择了医学；医学分支，选择了外科；外科科室，选了肝胆；工作，几大医院盛情邀请加盟，选择了东方肝胆。对于他来讲，他面对了很多个分叉，做出了好几次选择。但作为他人，或者客观来看，我们只会这么说，他读了理科，学了医，选了外科，修了肝胆，去了上海。只有这么一条路径。&/p&&p&正是因为树这种结构的广泛存在。计算机科学才会专门研究它。它不仅是一种描述，还有更深刻的启示。&/p&&p&&br&&u&&b&那就是，一定要活在当下，站在当下的节点上，面对未来，做出最符合自己内心的选择。身后，只有一条固化的路径，前方，还大有可为。&/b&&/u&&br&&/p&&p&&img src=&/v2-ea2e551c3193decba78dd_b.jpg& data-rawwidth=&1168& data-rawheight=&826& class=&origin_image zh-lightbox-thumb& width=&1168& data-original=&/v2-ea2e551c3193decba78dd_r.jpg&&&br&在树的毎一个节点，无论是最下面的根节点，还是中间的任何一个节点，往前看，都是一模一样的。前方有分岔，分岔还有分岔……。也就是说，站在任何一个节点，往前看，以站立处为根节点，前方都是一棵树，没有任何区别。这种思想，产生了用递归来存储树的方法。反正没有区别，就用同样的方式来建立分岔好了，重复调用就可以了，这样，就节省了很多工作量。&br&&img src=&/v2-ae4b46dde3161f71fdd790d8c8415d1a_b.jpg& data-rawwidth=&1168& data-rawheight=&334& class=&origin_image zh-lightbox-thumb& width=&1168& data-original=&/v2-ae4b46dde3161f71fdd790d8c8415d1a_r.jpg&&&img src=&/v2-9efe664f1d55e25b165a49_b.jpg& data-rawwidth=&1132& data-rawheight=&592& class=&origin_image zh-lightbox-thumb& width=&1132& data-original=&/v2-9efe664f1d55e25b165a49_r.jpg&&在计算机科学中，递归的思想很重要。她对现实的指导意义，就在于，&b&&u&活在当下，每个时刻和节点，做出选择的重要性。&/u&&/b&&br&&/p&&p&&b&&u&选择，没有对错。&/u&&/b&试问，谁来告诉我，什么是对的，什么是错的？没有，&b&&u&每个人都有自己的标准。所谓正确的选择，也即大多数人的标准而已。&/u&&/b&如果能追寻自己内心的声音，追求目标和实际利益的最大化，尽量在法律允许的范围内，合作共赢，不能共赢则将对他人的伤害控制在一个可以接受的范围内,做出顺应本心的选择。我认为，这就是一个很好的选择。这也仅仅是我的标准。&/p&&p&我们的前方，永远都是一棵树，在前方的前方，还是一颗树，站在前方的前方的前方，面前还是一颗树……。在身后，却是一条已经固化的路径，哎……。活在当下，立足当下，面对未来，做出选择，真的太重要。选择比努力，重要地多的多。选择之后，是否坚持自己选择，也是一种选择，好累啊。&br&&br&&/p&&p&无关紧要的选择，随心就好。在大的选择面前，要做出合适的选择，考察对比各种选择路径带来的价值是有必要的。这在计算科学中，属于算法的内容。所谓的算法，就是如何去做以达到目的的步骤和方法。这些步骤和方法，若想计算机能够识别和运作，要用编程语言来表示。这就是程序。所以，数据结构是很重要的，只有把现实中的物体与物体之间关系弄到计算机里面去了，才能让程序在上面跑。&/p&&p&希望每一个朋友在大多数节点，都能做出顺应自己内心的选择。&/p&
计算机科学中，有一门基础课程叫做数据结构。它是专门研究现实世界中，物体之间的关系，以及这种关系在计算机中是如何存储的。通俗讲，就是把现实世界中物与物之间的关系弄到计算机里面去，只有弄进去了，才有可能通过计算机科学的方法研究它们。物与物相互…
推荐一个博士论文，据说是css之父的&br&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&博士论文：层叠样式表&i class=&icon-external&&&/i&&/a&&br&&br&&h1&目录&/h1&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-4& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&提要&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-5& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&灵感&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-7& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&目录&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-8& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&插图清单&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-9& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&表格清单&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-6& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&致谢&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-10& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&综述及摘要&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-24& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&第1章 导言&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-25& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&1.1 结构与表现&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-26& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&1.1.1 抽象层次&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-27& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&1.1.2 表现性HTML&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-28& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&1.2 样式表&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-29& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&1.2.1 WYSIWYG ––一种竞争性模型&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-30& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&1.2.2 Web的特征&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-32& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&1.2.3 面向Web的样式表机制&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-33& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&1.3 CSS&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-34& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&1.3.1 CSS的发展&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-35& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&1.4 概要及结论&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-36& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&第2章 结构化文档&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-37& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.1 抽象层次&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-38& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2 结构化文档系统&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-39& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.1 Scribe&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-40& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.1.1 简单的文档&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-41& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.1.2 文档类型&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-42& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.1.3 Scribe命令&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-43& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.1.4 格式化环境&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-44& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.1.5 修改和添加环境&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-45& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.1.6 Scribe的价值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-46& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.2 LaTeX&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-47& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.3 开放文档架构（ODA）&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-48& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.4 标准通用标记语言（SGML）&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-49& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.4.1 文档类型定义（DTD）&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-50& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.4.2 处理指令&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-51& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.4.3 链接&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-52& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.4.4 SGML的价值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-53& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.5 超文本标记语言（HTML）&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-54& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.5.1 HTML的初始设计&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-55& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.5.2 结构和样式&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-56& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.5.3 HTML与SGML&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-57& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.5.4 HTML+与HTML3&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-58& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.5.5 HTML 3.2&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-59& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.5.6 HTML 4&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-60& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.5.7 HTML的价值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-61& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.6 XML&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-62& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.6.1 SGML工作组的特权（？）&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-63& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.6.2 XML规范&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-64& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.6.3 XML与样式表&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-65& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.2.6.4 XML的价值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-66& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.3 转换语言的任务&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-67& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.3.1 装扮“树”&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-69& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.3.2 转换“树”&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-70& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.3.3 格式化对象&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-71& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.3.4 保持语义和表现&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-72& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.3.5 样式和转换&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-73& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2.4 概要及结论&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-74& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&第3章 Web之前的样式表&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-75& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.1 样式表语言的构成&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-76& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.2 格式化输出规范实例（FOSI）&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-77& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.2.1 语法&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-78& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.2.2 选择符&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-79& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.2.3 属性&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-81& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.2.4 值和单位&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-82& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.2.5 值的传播&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-83& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.2.6 视觉格式化模型&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-84& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.2.7 链接机制&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-85& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.2.8 生成的内容&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-86& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.2.9 其他格式化要素&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-87& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.2.10 FOSI的价值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-88& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3 DSSSL&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-89& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.1 语法&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-90& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.2 选择符&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-91& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.2.1 元素构造规则&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-92& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.2.2 根构造规则&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-93& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.2.3 默认构造规则&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-94& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.2.4 查询构造规则&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-95& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.2.5 ID构造规则&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-96& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.3 属性&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-97& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.4 值和单位&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-98& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.5 值的传播&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-99& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.6 视觉格式化模型&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-100& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.6.1 流动对象&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-101& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.6.2 分区&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-103& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.7 链接机制&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-104& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.8 生成的内容&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-105& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.9 其他格式化要素&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-106& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.3.10 DSSSL的价值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-107& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4 P94&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-108& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.1 语法&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-109& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.2 选择符&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-111& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.3 属性&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-112& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.4 值和单位&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-113& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.4.1 长度单位&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-116& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.4.2 约束&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-118& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.4.3 弹性值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-119& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.5 值的传播&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-120& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.6 视觉格式化模型&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-121& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.7 链接机制&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-122& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.8 生成的内容&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-124& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.9 其他格式化要素&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-125& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.9.1 视图&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-127& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.4.10 P94的价值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-128& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&3.5 概要及结论&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-130& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&第4章 针对Web的样式表建议&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-131& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.1 Robert Raisch的建议（RRP）&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-132& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.1.1 语法&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-133& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.1.2 选择符&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-134& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.1.3 属性&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-135& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.1.4 值和单位&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-136& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.1.5 值的传播&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-137& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.1.6 视觉格式化模型&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-138& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.1.7 链接机制&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-139& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.1.8 生成的内容&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-140& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.1.9 其他格式化要素&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-141& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.1.10 RRP的价值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-142& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.2 Pei Wei的建议（PWP）&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-143& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.2.1 语法&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-144& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.2.2 选择符&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-145& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.2.3 属性&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-146& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.2.4 值和单位&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-147& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.2.5 值的传播&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-148& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.2.6 视觉格式化模型&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-149& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.2.7 链接机制&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-150& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.2.8 生成的内容&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-151& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.2.9 其他格式化要素&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-152& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.2.10 PWP的价值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-153& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.3 Steve Heaney的建议（SHP）&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-154& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.3.1 语法&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-155& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.3.2 选择符&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-156& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.3.3 属性&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-157& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.3.4 值和单位&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-158& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.3.5 值的传播&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-159& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.3.6 视觉格式化模型&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-160& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.3.7 链接机制&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-161& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.3.8 生成的内容&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-162& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.3.9 其他格式化要素&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-163& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.3.10 SHP的价值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-164& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.4 层叠HTML样式表（CHSS）&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-165& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.4.1 语法&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-168& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.4.2 选择符&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-170& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.4.3 属性&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-171& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.4.4 值和单位&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-172& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.4.4.1 表达式&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-174& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.4.4.2 混和的值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-176& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.4.5 值的传播&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-177& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.4.6 视觉格式化模型&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-178& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.4.7 链接机制&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-179& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.4.8 生成的内容&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-180& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.4.9 其他格式化要素&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-181& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.4.10 CHSS的价值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-182& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5 Joe English的建议（JEP）&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-183& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.1 语法&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-184& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.2 选择符&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-185& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.3 属性&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-186& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.4 值和单位&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-187& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.4.1 长度值&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-188& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.4.2 颜色值&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-189& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.4.3 图像&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-190& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.4.4 关键字值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-191& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.5 值的传播&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-192& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.5.1 继承&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-193& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.5.2 层叠&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-194& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.6 视觉格式化模型&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-195& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.7 链接机制&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-196& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.8 生成的内容&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-197& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.9 其他格式化要素&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-198& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.5.10 JEP的价值&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.6 简单格式化元语草案（SSFP）&i class=&icon-external&&&/i&&/a&&ul&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-200& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.6.1 语法&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-201& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.6.2 选择符&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-202& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.6.3 属性&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-203& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.6.4 值和单位&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-204& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.6.5 值的传播&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-205& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.6.6 视觉格式化模型&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-206& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.6.7 链接机制&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-207& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.6.8 生成的内容&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&///?target=http%3A//cncuckoo.github.io/cssthesis/%23h-208& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.6.9 其他格式化要素&i class=&icon-external&&&/i&&/a&&/li&&li&&
