请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。
1.前言
在日常的工作当中，每一次接触一个新的业务方向的时候，我们经常会遇到这么一个烦恼。
就是我们已经将整个业务流程中所需要各种技术全部掌握了，但是当我们一次次的重复之前的工作，一次次处理相同的问题的时候，你会慢慢感到麻木，不停地重复相同的事情更让你感到厌烦。
这时候你其实可以想想，是不是在我的工作中，出现了“瓶颈期”呢？
这个时候我们从新回头来看一下，我们从最开始接触这一个行业时，是以一个什么样的心态走来的吧。
- 跌入悬崖，发现绝世武功秘籍一本
- 疯狂修炼，自以为天下群豪不过如此
- 停滞不前，武功修炼已至臻境，却自觉武功有所欠缺
- 大彻大悟，才知“重剑无锋，大巧不工”
好吧，上面都是我随口胡诌的，实在编不下去了。
然而，当你工作了一到三年之后，你会发现，正如我上面所描述的那样。
每日工作依靠自己的所学已经基本能够解决，却无法更进一步时，你就需要去想一想，我们该如何突破我们的“瓶颈期”了。
2. 怎么判断你是不是在瓶颈期？
作为一只前端狗，今天就以几个 CSS 问题来引出今天的内容。
（答案请参考文章的最后）
初级班：
- dl, dt, dd三个标签浏览器默认margin值多少？是否有标签默认文字粗体？
中级班：
- line-height:150%和line-height:1.5的区别是？
高级班：
- float为何会让外部容器高度塌陷？这是bug？
- vertical-align的表现为何在IE7, IE8, IE9下表现不尽相同？其中的渲染机制是？
有些童鞋可能要问了，反正我平常使用的时候，都是直接全部清掉，我有必要知道那么多么？
不信你看百度什么的，他们不是也是上来就全部清掉么？
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
margin:0;padding:0
}
这里引用一下张鑫旭大大的话。
似于：我根本不需要知道我的前任、现任、后任女友是否是处女，因为我都直接让她们做处女膜修复！从实际应用来看，我无需关心
是不是感觉有点黄，<(￣3￣)>
可以细想一下，确实是这个道理。如果你不能对每一个属性都非常熟悉，你又怎么能做到信手拈来，收放自如呢？
这时候在回头来看百度上的默认设置，里面就存在一些小问题。
- dt标签的reset只是白白浪费，增加页面渲染负荷；
- padding属性值仅极少标签(ol, ul)有，其他标签无需浪费渲染重新设置。
有兴趣的童鞋可以再去看看淘宝的渲染速度。
对你所使用的"工具"的掌握程度，一定程度上能看出来你工作能力的高低。
如果上面的那个例子你能够理解，那么来看一下中级班的这个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 300px;
background: red;
line-height: 1.5;
}
</style>
</head>
<body>
<div>李鹏:3206064928</div>
</body>
</html>
我们在使用 line-height 1.5 和 150%的时候，代码中表现出来的结果是一样的。
但是这两个东西就真的相同了么？
他们两个的其实区别就在于继承的问题上。
-
150%是根据父元素的字体大小计算出行高，并且子元素依然沿用这个计算后的行高（1.5em 也是相同的计算方式）。
-
1.5则是根据子元素自己字体的大小去乘以1.5来计算行高。
我们平常工作的时候，不仅仅需要不断的学习，更需要知道这个东西是怎么来的，为什么要这么来。
所谓瓶颈并不是你不能够搞明白line-height:150%和line-height:1.5的区别，而是你没有意识到要搞明白。
3. 怎么突破瓶颈？
这里我画了一张图，用于说明这个瓶颈。
不好意思，中二病犯了。
可以看到，我们从最开始接触到的层面是最小的，很基础。
当我们基础层面“满了”之后才能慢慢提升到下一个阶段。
但是，怎么样才能稳步提升，尽量提高自己呢？
这里直接引用张鑫旭大大的原话了。
3.1 关于戒骄戒躁
如果有人当面说你：“旺财啊，你这个人有时候比较浮躁啊！”你可能心里或嘴上就嘀咕了：“有吗？我不觉得啊。我做事很认真的啊！”
究竟如何呢？人们常说当局者迷旁观者清。
假设你看到了一个用法：
vertical-align:-2px;
你的反应以及做法会是？
A. 我擦，原来vertical-align还支持数值啊，学习了！
B. 哟，vertical-align支持数值？我去查查呀，果然
C. 切，大惊小怪，我早就知道vertical-align支持数值，包括负值了，百分比值~~
D. 阿拉，我要自己试验下，新建个HTML页面，做个简单demo，看看兼容性什么的~~
E. 啊，什么，我刚扫视了，没注意到~~
对应下表：
选择项|浮躁程度|原因
:--:|:--|:--
A|比较浮躁|用法合理性未作验证，直接接收
B|略微浮躁|快餐式的接收，接收证明的观点，但未自己验证，可能会遗留真实的使用细节
C|浮躁|自以为是是学习的大忌，看上去小小的属性其实水很深
D|不浮躁|实践式的验证其实是比较繁琐，费时费力的，浮躁的人都是避免的，沉寂的人才能收心研究之
E|相当浮躁|好吧，如果这里都能pass掉，我就没法再说什么了~~~
A, B的行为实际还是只停留在表层，D行为似乎蛮靠谱的，但是，实际上，你想比别人走得更远，更快突破瓶颈，仅仅是将代码再实践一篇是不够的。我们还需要思考，对比以及整理、分享等。
如果是我，我会更近一步，对比思考：vertical-align:-2px;与margin-bottom:-2px;之间有什么差异，我会试验之~~
实际对比我会发现差异不大，但是我不会认为其没有差异，因为高中大学做实验很基本的一条就是多个条件的实践，于是，我会使用vertical-align:-200px;与margin-bottom:-200px;再做一次验证（当然，会设置其他用来观察的条件——背景色，边框或其他元素），结果，差异非常明显地出来了（这里先忽略IE6/IE7下margin-bottom负值极限bug）：
vertical-align会增加容器的高度，而margin-bottom负值则是减小！
3.2 关于分享讨论
分享看似把东西授予他人，自己做了吃力不讨好的事情。而实际上，准备分享内容以及在分享的过程中，你会提炼总结思考你要分享的东西，这对于学习而言是非常重要的，这个阶段好比模具成型，鱼入网袋，妹子推倒。
讨论的作用也很大，别人或中肯或傻逼的批评以及建议都会让你发现你知识上的不完善或不准确之处，群众的眼睛是雪亮的。
还是说我自己，接上面，如果是我，我可能就会把vertical-align负值与margin-bottom负值的差异整理成一篇文章发布出来（实际上是不会的，因为内容太少，质量档次不够，一般只会穿插在其他文章中。在发布书写制作demo的过程中，我肯定会有观点的提炼等，我就会发现一些新的东西，比方说IE6/IE7的margin-bottom负值数值超过一定限度时候的兼容性问题。
在写文章的时候，我可能会使用一些激烈的措辞，激发与他人的互动与讨论，从别人的评论中查漏补缺，获取新的知识。
当然，每个人分享的方式可能不一样。我因为嘴皮子的表达欠佳，因此，大多借助文章这个渠道分享与讨论。传播技术的同时自身也得到提高，如此一举两得的事情，何乐而不为呢！而你呢？如果你擅长交际组织什么的，分享会什么的，都是很赞的方式！
3.3 关于打破重组
华为貌似做过这样的事情，所有的老员工一律辞职，自己再重新去应聘。而且，好像类此的操作不只做了一次，“始作俑者”为任正非老先生。这种打破重组的效果如何呢？据说奇效，当年华为业绩可见一斑。
在突破瓶颈的时候，我们也可以，而且建议这么尝试。限制于惯性思维中，是很难突破瓶颈的。我们可以将自己过往的一切全盘否定，然后重新再来，你可能就会看到另外一个自己。
举个例子，如果你一直都是固定布局的，自己在心里默念三遍：固定布局就是个屎，我要投奔流体布局！如果你一直都是流体布局的，自己心里也默念三遍：流体布局就是个屎，我要投奔固定布局！如果你固定/流体布局兼修，自己心里也默念三遍：什么固定/流体布局都是屎，我要投奔时髦的响应布局！
放开自己，拥抱未来，拥抱变化。舍弃过往，接受新颖的架构，思想，理念。你就会发现，很短的时候，自己有了质地提升。
其中玄奥我是很难道明，要看你自己能不能体会出来了！
4. 判断问题的参考答案
1.dl, dt, dd三个标签浏览器默认margin值多少？是否有标签默认文字粗体？
dl标签：有默认margin（top,bottom且相同）值，没有默认padding值。
在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中：margin:12px 0px;
在IE6.0,7.0中：margin:19px 0px;
dd标签有默认margin-left：40px;(在所有上述浏览器中)。
拓展：需要注意的是ul、ol具有默认padding。
ol,ul标签：有默认margin-（top,bottom且相同）值，有默认padding-left值
在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中：margin:12px 0px;
在IE6.0,7.0中：margin:19px 0px;
默认padding-left值：在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中都是padding-left：40px;
在IE6.0,7.0中没有默认padding值，因为ol,ul标签的边框不包含序号。
2.line-height:150%和line-height:1.5的区别是？
有单位时，子元素继承了父元素计算得出的行距；无单位时继承了系数，子元素会分别计算各自行距（推荐使用）。例如：
1） 当line-height:xxx %时：
body{ font-size:14px; line-height:150%; }
h1{ font-size:26px; }
实际是：
body{ line-height:21px; /* 14px*150%=21px / }
h1{ line-height:21px; } / 继承父元素计算出来的line-height ,21px */
2 ） 当line-height:x.x 时：
body{ font-size:14px; line-height:1.5; }
h1{ font-size:26px; }
实际是：
body{ line-height:21px; /* 14px1.5=21px / }
h1{ line-height:39px; / 26px1.5=39px */ }
3.float为何会让外部容器高度塌陷？这是bug？
简单说，脱离文档流，提升层级“半级”。
或者可以看看一丝的文章
4.vertical-align的表现为何在IE7, IE8, IE9下表现不尽相同？其中的渲染机制是？
可以看看这些文章：
网友评论