思考题-关于CSS（转）

1. dl, dt, dd三个标签浏览器默认margin值多少？是否有标签默认文字粗体？
2. line-height:150%和line-height:1.5的区别是？
3. float为何会让外部容器高度塌陷？这是bug？
4. vertical-align的表现为何在IE7, IE8, IE9下表现不尽相同？其中的渲染机制是？

关于细节
有人可能会反问：我为什么要知道dl, dd, dt标签默认的margin值大小？我一般都是直接在CSS reset中设置：

body,h1,... ,dl,dt,dd,...,th,td { margin:0; padding: 0; }

你看，淘宝网首页就是这么干的(global-min.css)！从实际应用来看，我无需关心！

这样的想法，类似于：我根本不需要知道我的前任、现任、后任女友是否是处女，因为我都直接让她们做处女膜修复！从实际应用来看，我无需关心！

很多事情，如果你足够了解之，就能灵活掌控之！即所谓的驾驭能力。CSS细节了解，有助于你更好地驾驭CSS, 而不是被CSS调试，被浏览器劫持。

3~4两的大闸蟹虽然也有人要，但是，多啊，不值几个钱；但是半斤以上的大闸蟹的单价就要翻番。
盲从CSS reset的人也有人要，但是，多啊，不值几个钱；但是，知根究底的人这身价就要翻番了。

如果你有自己想法，知根知底，你可能就是这样做reset的：

body, h1, ..., dl, dd { margin: 0; }

dt标签的reset只是白白浪费，增加页面渲染负荷；padding属性值仅极少标签(ol, ul)有，其他标签无需浪费渲染重新设置。
//zxx: 对于淘宝首页的渲染速度我就不说什么了 

有不少人曾问我：“你的那个CSS架构我用了，很不错，使用很方便。但是，我经常CSS库的类名有5个甚至更多！而你写的页面很少会这样，为什么呢？”

<span class="db l h24 lh24 b">注意：</span>我是……

如果你对CSS细节足够掌握，可能您的使用就会是这样：

<strong class="l lh24">注意：</strong>我是……

这就是我说过的，如果页面开发工程师对CSS属性理解不够透彻，我的这种架构对其而言反而会略显吃力！

关于理解
你是否有这样的调试经历：尼玛IE(x)浏览器下出了个奇怪问题，哥哥我不知道原因啊原因啊原因，然后很苦逼地把觉得有可能的CSS属性一个一个试验——改一个刷一下，看看有没有变好。

唉，可怜的娃，宝贵的青春就这么蹉跎掉了，省下来和前台美女MM调调情也比这强多了~~

为什么我们需要深入理解CSS的一些表现？

1. 所谓“对症下药”，你要先知道这个症，这个根才可以。同样，当我们对CSS的底层表现有一定的理解与认识的时候，遇到一些看似奇怪的问题，我们可以一针见血，一语中的，分分钟搞定，然后，聊天，喝茶，把妹~~
2. 所谓“发明创造”，你要先知道其基本原理，工作机制。同样，当我们面对CSS的一些特殊需求的时候，一些看似蛋疼的问题，我们可以发挥我们的创造性思维，创建一个属于你的首创新方法，然后卖萌，邀功，得瑟~~
例如，我之前折腾过的inline-block两端对齐等。

理解的对与错
每个人的成长经历不同，大脑擅长处理的东西也不同，导致其看待与理解事物的方式也不同。因此，对于同一CSS表现的差异，每个人的理解都不同。

一旦有所差异，就有所谓的“对错”之争。估计不少人会拿《CSS权威指南》上的东西说事：你那种理解是错误的，CSS权威指南上说……或W3C官方文档解释说……

我大学电路老师最后一节课专门讲了她的科学观：何为科学？能够自圆其说，自成体系即是科学。中医算科学吗？算！因其有一套自己解释畅通的理论体系。

同样，对于CSS的理解，我个人一直认为什么对错的争执等都是没有意义的。如果你的解释可以自圆其说，自成体系，且应用无误，哪怕你的解释与什么规范啊权威啊八竿子都打不着，别人压根理解不了，你都是对的，OK的！

只要这类解释能够把其他所有的CSS表现都解释地通，成为体系，都是正确且深入的理解。

我想了想，关于突破瓶颈的建议我有三个：戒骄戒躁、分享讨论、打破重组。

关于戒骄戒躁
如果有人当面说你：“旺财啊，你这个人有时候比较浮躁啊！”你可能心里或嘴上就嘀咕了：“有吗？我不觉得啊。我做事很认真的啊！”

究竟如何呢？人们常说当局者迷旁观者清。

假设你看到了一个用法：

vertical-align:-2px;

如果是我，我会更近一步，对比思考：vertical-align:-2px;与margin-bottom:-2px;之间有什么差异，我会试验之~~

实际对比我会发现差异不大，但是我不会认为其没有差异，因为高中大学做实验很基本的一条就是多个条件的实践，于是，我会使用vertical-align:-200px;与margin-bottom:-200px;再做一次验证（当然，会设置其他用来观察的条件——背景色，边框或其他元素），结果，差异非常明显地出来了（这里先忽略IE6/IE7下margin-bottom负值极限bug）：
vertical-align会增加容器的高度，而margin-bottom负值则是减小！

您可以狠狠地点击这里：vertical-align/margin-bottom负值的差异demo

然后，我可能会整理，然后……（接下面）

关于分享讨论
分享看似把东西授予他人，自己做了吃力不讨好的事情。而实际上，准备分享内容以及在分享的过程中，你会提炼总结思考你要分享的东西，这对于学习而言是非常重要的，这个阶段好比模具成型，鱼入网袋，妹子推倒。

讨论的作用也很大，别人或中肯或傻逼的批评以及建议都会让你发现你知识上的不完善或不准确之处，群众的眼睛是雪亮的。

还是说我自己，接上面，如果是我，我可能就会把vertical-align负值与margin-bottom负值的差异整理成一篇文章发布出来（实际上是不会的，因为内容太少，质量档次不够，一般只会穿插在其他文章中，比如本文）。在发布书写制作demo的过程中，我肯定会有观点的提炼等，我就会发现一些新的东西，比方说IE6/IE7的margin-bottom负值数值超过一定限度时候的兼容性问题。