一、何为瓶颈？

“瓶颈”指瓶子的颈部，相对狭窄。这是很传神的一个词，因为狭窄，因此难以突破；但是，一旦突破了，就是广阔天空（偌大瓶身）！

小弟不才，凑合画了个瓶颈示意图，如下：

图中，A → B → C → … 表示进阶，即相关技能的提升；①②③④则表示各个阶段要进入的瓶颈！这个适用于各行业，各学派。

杨过的武功学习与瓶颈
我们都看过《神雕侠侣》，为便于理解，我就以“神雕大侠”杨过的武功成长经历解释上图的含义：

各进阶阶段：

阶段A

武功杂：蛤蟆功，玉女剑，打狗棒，弹指神通

阶段B

武功一流：整天蛇胆嗑药，玄武重剑

阶段C

武功顶尖：勤学苦练，木剑之术；自创神功，黯然销魂掌

各阶段瓶颈：

瓶颈①

无压力：天资聪慧+主角光环，因此，一些杂七杂八功夫入门迅速

瓶颈②

雕兄：该瓶颈突破全靠雕兄。蛇胆嗑药治伤增内力，武功引导与陪练

瓶颈③

自身：海边多年苦练，内功积累。自身观点想法转变（武功都是人创造的，我也可以……），自创掌法

瓶颈④

小龙女：野史外传，小龙女一起阴阳之类，神一般的存在……

您可以对照您目前CSS或JS的学习，您觉得您目前突破的几个学习瓶颈，目前在第几阶段？

二、只缘身在此山中

CSS的学习入门很容易，也可以说CSS学习的第①个瓶颈很大（见上图①处瓶口），以至于不能称为“瓶颈”。可能只要1年甚至半年的时候，我们就能根据设计图迅速成型页面，能熟练使用些CSS hack，这个阶段我们的成长很快，只要有页面写或只要四处转转，我们每天都能汲取新知识。如果用二维曲线表示就是：

满瓶不动半瓶摇，这个阶段实际上是CSS非常初级的阶段，也是广大页面仔们最为浮躁，最自以为是，最觉得CSS不过如此的阶段！所学越多越知所知甚少，那些成天叫嚣的人往往半吊子居多。

所以，我这里有必要提个醒，睡在冻床上不知冷热的“牛人”们，小看CSS的结果就是你丫直接在高速公路上被淹死！

不过，大多数这个阶段的同行们都清楚，自己还有很多东西要学的。但问题在于，每天也努力工作了，也去花时间学习了，只是似乎只是纯粹经验的积累，没有学到多少实质性的东西。这就是学习的瓶颈！

拿“如月”同学举例：工作是很认真的，页面也是能写的，前端书籍也买了很多，技术博客也会逛，前端技术论坛也参加。但是最后的效果呢？在我看来，还是那个层次，没有实质性的提高！为什么呢？

泛泛的经验积累式学习，看不到自己技术的瓶颈所在，总在同一层次添砖加瓦。就跟杨过的A阶段一样，总是不停地学习新功夫，但都不是很深入很牛逼，结果，连对付霍都都吃力。

广度与深度
任何一门学科都有其广度以及深度。在CSS的A级阶段，显然所学基本上是扩展自己知识面的广度：各个CSS属性熟悉，各个基本盒模型，各个声明在不同浏览器下的表现熟悉，兼容性问题如何修复熟悉等。然而，CSS的属性就那么多，如果只从了解每个CSS属性名称、属性值上来看，肯定会有一天达到饱和的。此时，我们就会觉得似乎没有什么新的东西可学了，CSS的那点东西我都知道了；似乎工作就成了每天的重复。这就是瓶颈期！

看看这张图：

我们很自然想到，要从A到B阶段，只要向下，向深度发展就可以了。所以，如果您觉得现在CSS这块学到的东西不多了，试试向垂直方向学习。

补充：
1. 有时候，如果我们CSS的基础足够得扎实与强大，我们会自热而然进入到B阶段，但这种完全经验积累的进阶学习需要很长的时间周期。
2. 如果没有一定的CSS基础以及经验做支撑，我们是无法进入B阶段的。
3. 深度才是你的核心竞争力。深入的细节掌握，深入的机制理解等，这些都是要下苦功才能掌握的，这是你有别于其他千千万万自认为会写页面的CSSer们的地方！

瓶口间的跳跃
CSS3的出现似乎让一些CSSer们的学习有了新的方向：CSS2.1中的那些CSS代码我闭着眼睛都能敲出来，实在太无趣了，终于出来个小三 – CSS3来调剂生活！

然而，从CSS2到CSS3的学习增加的只是一点广度的知识，多点时间，谁都可以达到你这种程度（学习门槛低啊！）。在我看来，无非就是从一个瓶口跳到另外一个稍显时髦的瓶口而已。

视角的局限
武侠中，主角们的进阶似乎都离不开所谓的“高人指点”；就算现实生活中，我们的人生也可能因为一句话而发生重大改变。那“指点”的是什么呢？“改变”的又是什么呢？——看待问题的方式以及角度！据说阿里有个倒立文化，换个视角看问题，会得到不同的答案。

我们很多人找不到学习的突破口，可能就是由于视角的问题。

我们往往不是这样子看的：

而是从上往下，只看到瓶口——

看不出水有多深，看不到瓶颈在哪里！想起了一部美剧——《迷失》，想起了一句古话——“只缘身在此山中”。

三、瓶颈在哪？

我先问几个问题，看看你是否能够回答上来？

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

以上问题可以大致判别你是A阶段还是B阶段。倒不是问题本身，而是问题所指的类别。

问题1, 2表示“深入的细节掌握”；3, 4表示“深入的机制理解”。再往后可能就是“网页大事，为我所控”，“天下页面，听我号令”，这要C阶段了，先不予讨论。

换句话说，您现在的瓶颈可能在于“细节掌握不够”、“机制等理解不够”。

关于细节
有人可能会反问：我为什么要知道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)浏览器下出了个奇怪问题，哥哥我不知道原因啊原因啊原因，然后很苦逼地