雖已數(shù)年，但未就學(xué)習(xí)專門寫過文章，這回破~處了。蒼蠅不叮沒有縫隙的雞蛋，領(lǐng)導(dǎo)不做沒有跟拍的表演，同樣，想到寫CSS學(xué)習(xí)的文章也是有原因的（雖然我的不少行為沒有原因）。

情景再現(xiàn)（尊重隱私，下面故事中人名均為化名，有加工）：

如月姑娘（本屆D2上微博中獎(jiǎng)上臺最漂亮的那位）的內(nèi)部分享會——關(guān)于CSS3 background相關(guān)內(nèi)容~~
……一頓巴拉巴拉……

如月：假設(shè)背景圖片500px*500px，則應(yīng)用background-size:50%后，顯示的背景圖片大小就是250px*250px
三晶：咔！不對吧！……CSS中的所有百分比都是相對于父級元素的，不會是自身……
仁力：是啊，50%應(yīng)該相對的是容器指定類型的box的尺寸……

……又巴拉巴拉百分比值相關(guān)東西……

如月：哦，教我們網(wǎng)頁的那個(gè)老師讓我們line-height使用百分比形式，說這樣更好，行高自適應(yīng)~~
三晶：咔！我信了你老師的邪！百分比行高并不具有自適應(yīng)性，除非使用該死低效的*通配符……

上面場景劇情可以總結(jié)為：“一個(gè)百分號認(rèn)識所引發(fā)的討論”，然后，引發(fā)的后續(xù)劇情就是：“一個(gè)百分號討論所引發(fā)的寫文章的沖動(dòng)”。

“沖動(dòng)”在何處？在于我似乎看到了很多人都正面對的，但同時(shí)自己并未意識到的學(xué)習(xí)瓶頸。當(dāng)然，所謂瓶頸并不是你不能夠搞明白line-height:150%和line-height:1.5的區(qū)別，而是你沒有意識到要搞明白。

這就是我多次提到的：想法、意識遠(yuǎn)比技術(shù)本身更有傳授的價(jià)值！

一、何為瓶頸？

“瓶頸”指瓶子的頸部，相對狹窄。這是很傳神的一個(gè)詞，因?yàn)楠M窄，因此難以突破；但是，一旦突破了，就是廣闊天空（偌大瓶身）！

小弟不才，湊合畫了個(gè)瓶頸示意圖，如下：

圖中，A → B → C → … 表示進(jìn)階，即相關(guān)技能的提升；①②③④則表示各個(gè)階段要進(jìn)入的瓶頸！這個(gè)適用于各行業(yè)，各學(xué)派。

楊過的武功~學(xué)習(xí)與瓶頸
我們都看過《神雕俠侶》，為便于理解，我就以“神雕大俠”楊過的武功成長經(jīng)歷解釋上圖的含義：

各進(jìn)階階段：

階段A武功雜：蛤蟆功，玉女劍，打狗棒，彈指神通

階段B武功一流：整天蛇膽嗑~藥，玄武重劍

階段C武功頂尖：勤學(xué)苦練，木劍之術(shù)；自創(chuàng)神功，黯然銷魂掌

各階段瓶頸：

瓶頸①無壓力：天資聰慧+主角光環(huán)，因此，一些雜七雜八功夫入門迅速

瓶頸②雕兄：該瓶頸突破全靠雕兄。蛇膽嗑~藥治傷增內(nèi)力，武功引導(dǎo)與陪練

瓶頸③自身：海邊多年苦練，內(nèi)功積累。自身觀點(diǎn)想法轉(zhuǎn)變（武功都是人創(chuàng)造的，我也可以……），自創(chuàng)掌法

瓶頸④小龍女：野史外傳，小龍女一起陰陽之類，神一般的存在……

您可以對照您目前CSS或JS的學(xué)習(xí)，您覺得您目前突破的幾個(gè)學(xué)習(xí)瓶頸，目前在第幾階段？

二、只緣身在此山中

CSS的學(xué)習(xí)入門很容易，也可以說CSS學(xué)習(xí)的第①個(gè)瓶頸很大（見上圖①處瓶口），以至于不能稱為“瓶頸”。可能只要1年甚至半年的時(shí)候，我們就能根據(jù)設(shè)計(jì)圖迅速成型頁面，能熟練使用些CSS hack，這個(gè)階段我們的成長很快，只要有頁面寫或只要四處轉(zhuǎn)轉(zhuǎn)，我們每天都能汲取新知識。如果用二維曲線表示就是：

滿瓶不動(dòng)半瓶搖，這個(gè)階段實(shí)際上是CSS非常初級的階段，也是廣大頁面仔們最為浮躁，最自以為是，最覺得CSS不過如此的階段！所學(xué)越多越知所知甚少，那些成天叫囂的人往往半吊子居多。

所以，我這里有必要提個(gè)醒，睡在凍床上不知冷熱的“牛人”們，小看CSS的結(jié)果就是你丫直接在高速公路上被淹死！

不過，大多數(shù)這個(gè)階段的同行們都清楚，自己還有很多東西要學(xué)的。但問題在于，每天也努力工作了，也去花時(shí)間學(xué)習(xí)了，只是似乎只是純粹經(jīng)驗(yàn)的積累，沒有學(xué)到多少實(shí)質(zhì)性的東西。這就是學(xué)習(xí)的瓶頸！

拿“如月”同學(xué)舉例：工作是很認(rèn)真的，頁面也是能寫的，前端書籍也買了很多，技術(shù)博客也會逛，前端技術(shù)論壇也參加。但是最后的效果呢？在我看來，還是那個(gè)層次，沒有實(shí)質(zhì)性的提高！為什么呢？

泛泛的經(jīng)驗(yàn)積累式學(xué)習(xí)，看不到自己技術(shù)的瓶頸所在，總在同一層次添磚加瓦。就跟楊過的A階段一樣，總是不停地學(xué)習(xí)新功夫，但都不是很深入很牛~逼，結(jié)果，連對付霍都都吃力。

廣度與深度
任何一門學(xué)科都有其廣度以及深度。在CSS的A級階段，顯然所學(xué)基本上是擴(kuò)展自己知識面的廣度：各個(gè)CSS屬性熟悉，各個(gè)基本盒模型，各個(gè)聲明在不同瀏覽器下的表現(xiàn)熟悉，兼容性問題如何修復(fù)熟悉等。然而，CSS的屬性就那么多，如果只從了解每個(gè)CSS屬性名稱、屬性值上來看，肯定會有一天達(dá)到飽和的。此時(shí)，我們就會覺得似乎沒有什么新的東西可學(xué)了，CSS的那點(diǎn)東西我都知道了；似乎工作就成了每天的重復(fù)。這就是瓶頸期！

看看這張圖：

我們很自然想到，要從A到B階段，只要向下，向深度發(fā)展就可以了。所以，如果您覺得現(xiàn)在CSS這塊學(xué)到的東西不多了，試試向垂直方向?qū)W習(xí)。

補(bǔ)充：
1. 有時(shí)候，如果我們CSS的基礎(chǔ)足夠得扎實(shí)與強(qiáng)大，我們會自熱而然進(jìn)入到B階段，但這種完全經(jīng)驗(yàn)積累的進(jìn)階學(xué)習(xí)需要很長的時(shí)間周期。
2. 如果沒有一定的CSS基礎(chǔ)以及經(jīng)驗(yàn)做支撐，我們是無法進(jìn)入B階段的。
3. 深度才是你的核心競爭力。深入的細(xì)節(jié)掌握，深入的機(jī)制理解等，這些都是要下苦功才能掌握的，這是你有別于其他千千萬萬自認(rèn)為會寫頁面的CSSer們的地方！

瓶口間的跳躍
CSS3的出現(xiàn)似乎讓一些CSSer們的學(xué)習(xí)有了新的方向：CSS2.1中的那些CSS代碼我閉著眼睛都能敲出來，實(shí)在太無趣了，終于出來個(gè)小三 – CSS3來調(diào)劑生活！

然而，從CSS2到CSS3的學(xué)習(xí)增加的只是一點(diǎn)廣度的知識，多點(diǎn)時(shí)間，誰都可以達(dá)到你這種程度（學(xué)習(xí)門檻低?。。?。在我看來，無非就是從一個(gè)瓶口跳到另外一個(gè)稍顯時(shí)髦的瓶口而已。

視角的局限
武俠中，主角們的進(jìn)階似乎都離不開所謂的“高人指點(diǎn)”；就算現(xiàn)實(shí)生活中，我們的人生也可能因?yàn)橐痪湓挾l(fā)生重大改變。那“指點(diǎn)”的是什么呢？“改變”的又是什么呢？——看待問題的方式以及角度！據(jù)說阿里有個(gè)倒立文化，換個(gè)視角看問題，會得到不同的答案。

我們很多人找不到學(xué)習(xí)的突破口，可能就是由于視角的問題。

我們往往不是這樣子看的：

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

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

三、瓶頸在哪？

我先問幾個(gè)問題，看看你是否能夠回答上來？

1. dl, dt, dd三個(gè)標(biāo)簽瀏覽器默認(rèn)margin值多少？是否有標(biāo)簽?zāi)J(rèn)文字粗體？line-height:150%和line-height:1.5的區(qū)別是？float為何會讓外部容器高度塌陷？這是bug？vertical-align的表現(xiàn)為何在IE7, IE8, IE9下表現(xiàn)不盡相同？其中的渲染機(jī)制是？

以上問題可以大致判別你是A階段還是B階段。倒不是問題本身，而是問題所指的類別。

問題1, 2表示“深入的細(xì)節(jié)掌握”；3, 4表示“深入的機(jī)制理解”。再往后可能就是“網(wǎng)頁大事，為我所控”，“天下頁面，聽我號令”，這要C階段了，先不予討論。

換句話說，您現(xiàn)在的瓶頸可能在于“細(xì)節(jié)掌握不夠”、“機(jī)制等理解不夠”。

關(guān)于細(xì)節(jié)
有人可能會反問：我為什么要知道dl, dd, dt標(biāo)簽?zāi)J(rèn)的margin值大?。课乙话愣际侵苯釉贑SS reset中設(shè)置：

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

你看，淘寶網(wǎng)首頁就是這么干的(global-min.css)！從實(shí)際應(yīng)用來看，我無需關(guān)心!

很多事情，如果你足夠了解之，就能靈活掌控之！即所謂的駕馭能力。CSS細(xì)節(jié)了解，有助于你更好地駕馭CSS, 而不是被CSS調(diào)試，被瀏覽器劫持。

3~4兩的大閘蟹雖然也有人要，但是，多啊，不值幾個(gè)錢；但是半斤以上的大閘蟹的單價(jià)就要翻番。
盲從CSS reset的人也有人要，但是，多啊，不值幾個(gè)錢；但是，知根究底的人這身價(jià)就要翻番了。

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

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

dt標(biāo)簽的reset只是白白浪費(fèi)，增加頁面渲染負(fù)荷；padding屬性值僅極少標(biāo)簽(ol, ul)有，其他標(biāo)簽無需浪費(fèi)渲染重新設(shè)置。
//zxx: 對于淘寶首頁的渲染速度我就不說什么了

有不少人曾問我：“你的那個(gè)CSS架構(gòu)我用了，很不錯(cuò)，使用很方便。但是，我經(jīng)常CSS庫的類名有5個(gè)甚至更多！而你寫的頁面很少會這樣，為什么呢？”

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

如果你對CSS細(xì)節(jié)足夠掌握，可能您的使用就會是這樣：

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

這就是我說過的，如果頁面開發(fā)工程師對CSS屬性理解不夠透徹，我的這種架構(gòu)對其而言反而會略顯吃力！

關(guān)于理解
你是否有這樣的調(diào)試經(jīng)歷：IE(x)瀏覽器下出了個(gè)奇怪問題，哥哥我不知道原因啊原因啊原因，然后很苦逼地把覺得有可能的CSS屬性一個(gè)一個(gè)試驗(yàn)——改一個(gè)刷一下，看看有沒有變好。

唉，可憐的娃，寶貴的青春就這么蹉跎掉了，省下來和前臺美女MM調(diào)調(diào)情也比這強(qiáng)多了~~

為什么我們需要深入理解CSS的一些表現(xiàn)？

1. 所謂“對癥下藥”，你要先知道這個(gè)癥，這個(gè)根才可以。同樣，當(dāng)我們對CSS的底層表現(xiàn)有一定的理解與認(rèn)識的時(shí)候，遇到一些看似奇怪的問題，我們可以一針見血，一語中的，分分鐘搞定，然后，聊天，喝茶，把妹~~
2. 所謂“發(fā)明創(chuàng)造”，你要先知道其基本原理，工作機(jī)制。同樣，當(dāng)我們面對CSS的一些特殊需求的時(shí)候，一些看似苦惱的問題，我們可以發(fā)揮我們的創(chuàng)造性思維，創(chuàng)建一個(gè)屬于你的首創(chuàng)新方法，然后賣萌，邀功，得瑟~~
例如，我之前折騰過的inline-block兩端對齊等。

理解的對與錯(cuò)
每個(gè)人的成長經(jīng)歷不同，大腦擅長處理的東西也不同，導(dǎo)致其看待與理解事物的方式也不同。因此，對于同一CSS表現(xiàn)的差異，每個(gè)人的理解都不同。

一旦有所差異，就有所謂的“對錯(cuò)”之爭。估計(jì)不少人會拿《CSS權(quán)威指南》上的東西說事：你那種理解是錯(cuò)誤的，CSS權(quán)威指南上說……或W3C官方文檔解釋說……

我大學(xué)電路老師最后一節(jié)課專門講了她的科學(xué)觀：何為科學(xué)？能夠自圓其說，自成體系即是科學(xué)。中醫(yī)算科學(xué)嗎？算！因其有一套自己解釋暢通的理論體系。

同樣，對于CSS的理解，我個(gè)人一直認(rèn)為什么對錯(cuò)的爭執(zhí)等都是沒有意義的。如果你的解釋可以自圓其說，自成體系，且應(yīng)用無誤，哪怕你的解釋與什么規(guī)范啊權(quán)威啊八竿子都打不著，別人壓根理解不了，你都是對的，OK的！

拘泥只會限制自身的創(chuàng)造力以及認(rèn)知能力?；鹩暗氖澜缢闶鞘澜鐔幔渴?，自圓其說，自成體系！海賊王的世界算是世界嗎？是自圓其說，自成體系。

因此，如果你是設(shè)計(jì)出身，或文學(xué)出身的。什么復(fù)雜邏輯，深?yuàn)W解釋理解不了，你大可摒棄之，用你自己的世界去解釋其表現(xiàn)，你的感性思維以及藝術(shù)情懷只會讓這個(gè)世界變得更精彩！那些自以為是，抱殘守缺的雜碎們就不用鳥他們，讓他們隨著時(shí)間消逝去吧~~

好比面對“浮動(dòng)元素會讓外部高度塌陷的原因？”這個(gè)問題，你可以這樣解釋：

浮動(dòng)是敏感詞浮動(dòng)是海市蜃樓浮動(dòng)是個(gè)不孝子，會讓爸爸顏面無存，顯得很矮小浮動(dòng)是個(gè)魔鬼，和絕對定位是兄弟，本都屬于天上人浮動(dòng)是中國，講究面子工程浮動(dòng)是中國股市，吸引股民跟在左右，本身就是個(gè)泡沫……

只要這類解釋能夠把其他所有的CSS表現(xiàn)都解釋地通，成為體系，都是正確且深入的理解。

四、如何突破？

知道問題在哪里，其實(shí)已經(jīng)解決了一大半。下面的問題如何實(shí)踐了！

楊過16年前就開始意識到要可以自創(chuàng)武功（類似于我們自創(chuàng)CSS實(shí)現(xiàn)），但是，最終實(shí)現(xiàn)確實(shí)N年以后，不斷的感悟以及練習(xí)才得以成功。

即使你再天才（楊過夠天才吧），機(jī)遇夠神奇（楊過經(jīng)歷夠神奇吧），也也是要會很多功夫和精力才能到達(dá)另外一個(gè)層次的。只是別人可能30年的，你只要20年而已（黃藥師說過，楊過20歲的武功修為其30歲才達(dá)到）。

我想了想，關(guān)于突破瓶頸的建議我有三個(gè)：戒驕戒躁、分享討論、打破重組。

關(guān)于戒驕戒躁
如果有人當(dāng)面說你：“旺財(cái)啊，你這個(gè)人有時(shí)候比較浮躁啊！”你可能心里或嘴上就嘀咕了：“有嗎？我不覺得啊。我做事很認(rèn)真的??！”

究竟如何呢？人們常說當(dāng)局者迷旁觀者清。

假設(shè)你看到了一個(gè)用法：

你的反應(yīng)以及做法會是？
A. 我擦，原來vertical-align還支持?jǐn)?shù)值啊，學(xué)習(xí)了！
B. 喲，vertical-align支持?jǐn)?shù)值？我去查查~~呀，果然~~
C. 切，大驚小怪，我早就知道vertical-align支持?jǐn)?shù)值，包括負(fù)值了，百分比值~~
D. 阿拉，我要自己試驗(yàn)下，新建個(gè)HTML頁面，做個(gè)簡單demo，看看兼容性什么的~~
E. 啊，什么，我剛掃視了，沒注意到~~

對應(yīng)下表：

選擇項(xiàng)	浮躁程度	原因
A	比較浮躁	用法合理性未作驗(yàn)證，直接接收
B	略微浮躁	快餐式的接收，接收證明的觀點(diǎn)，但未自己驗(yàn)證，可能會遺留真實(shí)的使用細(xì)節(jié)
C	浮躁	自以為是是學(xué)習(xí)的大忌，看上去小小的屬性其實(shí)水很深
D	不浮躁	實(shí)踐式的驗(yàn)證其實(shí)是比較繁瑣，費(fèi)時(shí)費(fèi)力的，浮躁的人都是避免的，沉寂的人才能收心研究之
E	相當(dāng)浮躁	好吧，如果這里都能pass掉，我就沒法再說什么了~~~

選擇項(xiàng) 浮躁程度 原因A比較浮躁用法合理性未作驗(yàn)證，直接接收B略微浮躁快餐式的接收，接收證明的觀點(diǎn)，但未自己驗(yàn)證，可能會遺留真實(shí)的使用細(xì)節(jié)C浮躁自以為是是學(xué)習(xí)的大忌，看上去小小的屬性其實(shí)水很深D不浮躁實(shí)踐式的驗(yàn)證其實(shí)是比較繁瑣，費(fèi)時(shí)費(fèi)力的，浮躁的人都是避免的，沉寂的人才能收心研究之E相當(dāng)浮躁好吧，如果這里都能pass掉，我就沒法再說什么了~~~

A, B的行為實(shí)際還是只停留在表層，D行為似乎蠻靠譜的，但是，實(shí)際上，你想比別人走得更遠(yuǎn)，更快突破瓶頸，僅僅是將代碼再實(shí)踐一篇是不夠的。我們還需要思考，對比以及整理、分享等。

如果是我，我會更近一步，對比思考：vertical-align:-2px;與margin-bottom:-2px;之間有什么差異，我會試驗(yàn)之~~

實(shí)際對比我會發(fā)現(xiàn)差異不大，但是我不會認(rèn)為其沒有差異，因?yàn)楦咧写髮W(xué)做實(shí)驗(yàn)很基本的一條就是多個(gè)條件的實(shí)踐，于是，我會使用vertical-align:-200px;與margin-bottom:-200px;再做一次驗(yàn)證（當(dāng)然，會設(shè)置其他用來觀察的條件——背景色，邊框或其他元素），結(jié)果，差異非常明顯地出來了（這里先忽略IE6/IE7下margin-bottom負(fù)值極限bug）：
vertical-align會增加容器的高度，而margin-bottom負(fù)值則是減??！

您可以狠狠地點(diǎn)擊這里：vertical-align/margin-bottom負(fù)值的差異demo

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

關(guān)于分享討論
分享看似把東西授予他人，自己做了吃力不討好的事情。而實(shí)際上，準(zhǔn)備分享內(nèi)容以及在分享的過程中，你會提煉總結(jié)思考你要分享的東西，這對于學(xué)習(xí)而言是非常重要的，這個(gè)階段好比模具成型，魚入網(wǎng)袋，妹子推倒。

討論的作用也很大，別人或中肯的批評以及建議都會讓你發(fā)現(xiàn)你知識上的不完善或不準(zhǔn)確之處，群眾的眼睛是雪亮的。

還是說我自己，接上面，如果是我，我可能就會把vertical-align負(fù)值與margin-bottom負(fù)值的差異整理成一篇文章發(fā)布出來（實(shí)際上是不會的，因?yàn)閮?nèi)容太少，質(zhì)量檔次不夠，一般只會穿插在其他文章中，比如本文）。在發(fā)布書寫制作demo的過程中，我肯定會有觀點(diǎn)的提煉等，我就會發(fā)現(xiàn)一些新的東西，比方說IE6/IE7的margin-bottom負(fù)值數(shù)值超過一定限度時(shí)候的兼容性問題。

在寫文章的時(shí)候，我可能會使用一些激烈的措辭，激發(fā)與他人的互動(dòng)與討論，從別人的評論中查漏補(bǔ)缺，獲取新的知識。

當(dāng)然，每個(gè)人分享的方式可能不一樣。我因?yàn)樽炱ぷ拥谋磉_(dá)欠佳，因此，大多借助文章這個(gè)渠道分享與討論。傳播技術(shù)的同時(shí)自身也得到提高，如此一舉兩得的事情，何樂而不為呢！而你呢？如果你擅長交際組織什么的，分享會什么的，都是很贊的方式！

關(guān)于打破重組
華為貌似做過這樣的事情，所有的老員工一律辭職，自己再重新去應(yīng)聘。而且，好像類此的操作不只做了一次，“始作俑者”為任正非老先生。這種打破重組的效果如何呢？據(jù)說奇效，當(dāng)年華為業(yè)績可見一斑。

在突破瓶頸的時(shí)候，我們也可以，而且建議這么嘗試。限制于慣性思維中，是很難突破瓶頸的。我們可以將自己過往的一切全盤否定，然后重新再來，你可能就會看到另外一個(gè)自己。

舉個(gè)例子，如果你一直都是固定布局的，自己在心里默念三遍：固定布局就是個(gè)屎，我要投奔流體布局！如果你一直都是流體布局的，自己心里也默念三遍：流體布局就是個(gè)屎，我要投奔固定布局！如果你固定/流體布局兼修，自己心里也默念三遍：什么固定/流體布局都是屎，我要投奔時(shí)髦的響應(yīng)布局！

放開自己，擁抱未來，擁抱變化。舍棄過往，接受新穎的架構(gòu)，思想，理念。你就會發(fā)現(xiàn)，很短的時(shí)候，自己有了質(zhì)地提升。

其中玄奧我是很難道明，要看你自己能不能體會出來了！

五、事在人為

其實(shí)，廣大頁面并不畏懼那些學(xué)習(xí)能力強(qiáng)的人，畏懼的是那些學(xué)習(xí)能力強(qiáng)，同時(shí)，學(xué)習(xí)又拼命的人。

頁面仔們，捫心自問下：我每天幾點(diǎn)下班？我每天下班后都干嘛了？我有專門花空余時(shí)間深入理解學(xué)習(xí)CSS的一些東西嗎？我能夠連續(xù)堅(jiān)持?jǐn)?shù)月嗎？

最后，我只說一句話：“吃得苦中苦，方為人上人”。