每當寫完大量(liang)的(de)(de)樣式代碼的(de)(de)時候，因為(wei)css本(ben)身的(de)(de)層疊(die)性，在觀察其顯示出的(de)(de)效果，因為(wei)某些(xie)原(yuan)因可能(neng)出現了與之前(qian)設想有(you)些(xie)出入的(de)(de)地方，該(gai)從那些(xie)地方如說去查找下這(zhe)些(xie)問(wen)題(ti)來源。在這(zhe)里，我說說自己的(de)(de)想法思(si)路。

不(bu)(bu)(bu)過在這之前，你需(xu)要對(dui)css屬性(xing)有些足夠上的(de)認(ren)識，以(yi)及在顯(xian)示其效果(guo)的(de)時候可能(neng)會出因為不(bu)(bu)(bu)同環境下(xia)，導致的(de)不(bu)(bu)(bu)同的(de)樣子的(de)結果(guo)顯(xian)示。

下面就(jiu)我的思路來說說是怎(zen)樣思考的方式的。

• 在真正糾錯之前，請確保你寫的東西那些樣式文檔上面沒有一些疏忽上的錯誤。
• 確保了上一點，先去看看現在的錯誤顯示效果是個什么樣的狀態，為什么會是這樣的，支持這個樣式顯示的結構是不是有些問題抑或是這個結構與你自己預期的效果結構有出入
• 然后，在通過一些調試工具觀察他的盒子模型以及相關的渲染數據和我們經常使用的時候，因為某些方法而出現的問題并沒有做回避處理。
• 以上仔細梳理之后，最后針對實現該顯示效果的樣式相關屬性的使用核對下，確保自己的實現思路跟自己的想法是一直的。

什么是疏忽上的出錯誤？ 
這個就是在編(bian)寫(xie)大量(liang)的(de)樣式的(de)額時候，可能會因為手(shou)誤，將(jiang)一些不是正確解析的(de)符號敲進去或(huo)者是漏掉了某些規則符號，導(dao)致(zhi)無法解析顯示出來。

每當有顯示的樣式的時候，出現的不是我們的預期 
在確認上面無誤的 之后，我們先看下錯誤的效果，設想下可能導致這些效果的原因 
- 是不是因為層級的問題 
- 是不是因為某些常用的方法順帶出現的一些異常情況沒有回避，比如，需要清除浮動、inline-block之間有空隙、需要溢出顯示的地方設置了overflow：hidden、某些樣式設置會出現層級上的變化，還有一些設定必須要有其他的樣式設置才有效果等等。 
- 針對渲染出來的盒子模型，以及相關的屬性樣式數據，這里我用chrome devtools截圖給大家看看 
 
可以(yi)看到(dao)這(zhe)里(li)可以(yi)看到(dao)他的結構，某(mou)個(ge)(ge)節點計算(suan)出(chu)來的額樣式，和當前瀏(liu)覽器解析后計算(suan)出(chu)來樣式，都可以(yi)很直觀(guan)的看出(chu)當前錯誤的顯示跟預(yu)期(qi)的差別，從(cong)而找出(chu)問題的根源。還又右上角那個(ge)(ge)塊，很直觀(guan)的看出(chu)前盒子模(mo)型的數據。

每當有顯示的樣式的時候，出現的不是我們的預期 
 最后就是(shi)針對我們設想的(de)預期(qi)效果(guo)，一步(bu)一步(bu)分析(xi)，逐步(bu)對照(zhao)，實現的(de)效果(guo)，需要哪些樣式，要用到那些手法，

最后要(yao)說的(de)就(jiu)是(shi)，因(yin)為css本(ben)來就(jiu)是(shi)層疊(die)樣式(shi)表，可能(neng)有些原因(yin)是(shi)因(yin)為某些選擇器的(de)優(you)先級問題(ti)導致(zhi)出現了樣式(shi)上的(de)沖突。在(zai)這個地(di)方(fang)，盡量不(bu)要(yao)用！important的(de)方(fang)式(shi)去解決，最好(hao)是(shi)在(zai)編寫(xie)一個完整的(de)樣式(shi)樣式(shi)表前(qian)，好(hao)好(hao)的(de)思考(kao)下，如(ru)何命(ming)名，構建組件，分離(li)狀態等等。然后，要(yao)想提高效率，免去不(bu)必要(yao)的(de)麻(ma)煩，試用下css預處理(li)器也很(hen)有必要(yao)的(de)，比如(ru)less sass等等。

以上僅(jin)僅(jin)是個人意見(jian)，有更好的方法思路，也請分享出來談論。獻丑