算警示吧——此文来自张鑫旭（说说CSS学习中的瓶颈）

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2523

虽已数年，但未就学习专门写过文章，这回破处了。苍蝇不叮没有缝隙的鸡蛋，领导不作没有跟拍的表演，一样，想到写CSS学习的文章也是有缘由的（虽然个人很多行为没有缘由）。

情景再现（尊重隐私，下面故事中人名均为化名，有加工）：

如月姑娘（本届D2上微博中奖上台最漂亮的那位）的内部分享会——关于CSS3 background相关内容~~
……一顿巴拉巴拉……

如月：假设背景图片500px*500px，则应用background-size:50%后，显示的背景图片大小就是250px*250px
三晶：咔！不对吧！……CSS中的全部百分比都是相对于父级元素的，不会是自身……
仁力：是啊，50%应该相对的是容器指定类型的box的尺寸……

……又巴拉巴拉百分比值相关东西……

如月：哦，教咱们网页的那个老师让咱们line-height使用百分比形式，说这样更好，行高自适应~~
三晶：咔！我信了你老师的邪！百分比行高并不具备自适应性，除非使用该死低效的*通配符……

上面场景剧情能够总结为：“一个百分号认识所引起的讨论”，而后，引起的后续剧情就是：“一个百分号讨论所引起的写文章的冲动”。

“冲动”在何处？在于我彷佛看到了不少人都正面对的，但同时本身并未意识到的学习瓶颈。固然，所谓瓶颈并非你不可以搞明白line-height:150%和line-height:1.5的区别，而是你没有意识到要搞明白。

这就是我屡次提到的：想法、意识远比技术自己更有传授的价值！

1、何为瓶颈？

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

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

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

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

各进阶阶段：

阶段A

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

阶段B

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

阶段C

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

各阶段瓶颈：

瓶颈①

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

瓶颈②

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

瓶颈③

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

瓶颈④

小龙女：野史外传，小龙女一块儿阴阳之类，神通常的存在……

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

2、只缘身在此山中

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的学习增长的只是一点广度的知识，多点时间，谁均可以达到你这种程度（学习门槛低啊！）。在我看来，无非就是从一个瓶口跳到另一个稍显时髦的瓶口而已。

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

咱们不少人找不到学习的突破口，可能就是因为视角的问题。

咱们每每不是这样子看的：

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

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

3、瓶颈在哪？

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

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)浏览器下出了个奇怪问题，哥哥我不知道缘由啊缘由啊缘由，而后很苦逼地把以为有可能的CSS属性一个一个试验——改一个刷一下，看看有没有变好。

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

为何咱们须要深刻理解CSS的一些表现？

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

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

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

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

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

拘泥只会限制自身的创造力以及认知能力。火影的世界算是世界吗？是，自圆其说，自成体系！海贼王的世界算是世界吗？是自圆其说，自成体系。

所以，若是你是设计出身，或文学出身的。什么复杂逻辑，深奥解释理解不了，你大可摒弃之，用你本身的世界去解释其表现，你的感性思惟以及艺术情怀只会让这个世界变得更精彩！那些自觉得是，抱残守缺的杂碎们就不用鸟他们，让他们随着时间消逝去吧~~

比如面对“浮动元素会让外部高度塌陷的缘由？”这个问题，你能够这样解释：

• 浮动是敏感词
• 浮动是海市蜃楼
• 浮动是个不孝子，会让爸爸颜面无存，显得很矮小
• 浮动是个魔鬼，和绝对定位是兄弟，本都属于天上人
• 浮动是中国，讲究面子工程
• 浮动是中国股市，吸引屁民跟在左右，自己就是个泡沫
• ……

只要这类解释可以把其余全部的CSS表现都解释地通，成为体系，都是正确且深刻的理解。

4、如何突破？

知道问题在哪里，其实已经解决了一大半。下面的问题如何实践了！

杨过16年前就开始意识到要能够自创武功（相似于咱们自创CSS实现），可是，最终实现确实N年之后，不断的感悟以及练习才得以成功。

即便你再天才（杨过够天才吧），机遇够神奇（杨过经历够神奇吧），也也是要会不少功夫和精力才能到达另一个层次的。只是别人可能30年的，你只要20年而已（黄药师说过，杨过20岁的武功修为其30岁才达到）。

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

关于戒骄戒躁
若是有人当面说你：“旺财啊，你这我的有时候比较浮躁啊！”你可能内心或嘴上就嘀咕了：“有吗？我不以为啊。我作事很认真的啊！”

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

假设你看到了一个用法：

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负值则是减少！

您能够狠狠地点击这里：vertical-align/margin-bottom负值的差别demo

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

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

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

仍是说我本身，接上面，若是是我，我可能就会把vertical-align负值与margin-bottom负值的差别整理成一篇文章发布出来（其实是不会的，由于内容太少，质量档次不够，通常只会穿插在其余文章中，好比本文）。在发布书写制做demo的过程当中，我确定会有观点的提炼等，我就会发现一些新的东西，比方说IE6/IE7的margin-bottom负值数值超过必定限度时候的兼容性问题。

在写文章的时候，我可能会使用一些激烈的措辞，激发与他人的互动与讨论，从别人的评论中查漏补缺，获取新的知识。

固然，每一个人分享的方式可能不同。我由于嘴皮子的表达欠佳，所以，大多借助文章这个渠道分享与讨论。传播技术的同时自身也获得提升，如此一箭双雕的事情，何乐而不为呢！而你呢？若是你擅长交际组织什么的，分享会什么的，都是很赞的方式！

关于打破重组
华为貌似作过这样的事情，全部的老员工一概辞职，本身再从新去应聘。并且，好像类此的操做不仅作了一次，“始做俑者”为任正非老先生。这种打破重组的效果如何呢？听说奇效，当年华为业绩可见一斑。

在突破瓶颈的时候，咱们也能够，并且建议这么尝试。限制于惯性思惟中，是很难突破瓶颈的。咱们能够将本身过往的一切全盘否认，而后从新再来，你可能就会看到另一个本身。

举个例子，若是你一直都是固定布局的，本身在内心默念三遍：固定布局就是个屎，我要投奔流体布局！若是你一直都是流体布局的，本身内心也默念三遍：流体布局就是个屎，我要投奔固定布局！若是你固定/流体布局兼修，本身内心也默念三遍：什么固定/流体布局都是屎，我要投奔时髦的响应布局！

放开本身，拥抱将来，拥抱变化。舍弃过往，接受新颖的架构，思想，理念。你就会发现，很短的时候，本身有了质地提高。

其中玄奥我是很难道明，要看你本身能不能体会出来了！

5、事在人为

其实，广大页面屌丝们并不畏惧那些学习能力强的人，畏惧的是那些学习能力强，同时，尼玛学习又拼命的人。

页面仔们，扪心自问下：我天天几点下班？我天天下班后都干吗了？我有专门花空余时间深刻理解学习CSS的一些东西吗？我可以连续坚持数月吗？

最后，我只说一句话：“吃得苦中苦，方为人上人”。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2523

（本篇完）