每當(dāng)寫完大量的樣式代碼的時候，因為css本身的層疊性，在觀察其顯示出的效果，因為某些原因可能出現(xiàn)了與之前設(shè)想有些出入的地方，該從那些地方如說去查找下這些問題來源。在這里，我說說自己的想法思路。

不過在這之前，你需要對css屬性有些足夠上的認(rèn)識，以及在顯示其效果的時候可能會出因為不同環(huán)境下，導(dǎo)致的不同的樣子的結(jié)果顯示。

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

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

什么是疏忽上的出錯誤？ 
這個就是在編寫大量的樣式的額時候，可能會因為手誤，將一些不是正確解析的符號敲進(jìn)去或者是漏掉了某些規(guī)則符號，導(dǎo)致無法解析顯示出來。

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

每當(dāng)有顯示的樣式的時候，出現(xiàn)的不是我們的預(yù)期 
最后就是針對我們設(shè)想的預(yù)期效果，一步一步分析，逐步對照，實現(xiàn)的效果，需要哪些樣式，要用到那些手法，

最后要說的就是，因為css本來就是層疊樣式表，可能有些原因是因為某些選擇器的優(yōu)先級問題導(dǎo)致出現(xiàn)了樣式上的沖突。在這個地方，盡量不要用！important的方式去解決，最好是在編寫一個完整的樣式樣式表前，好好的思考下，如何命名，構(gòu)建組件，分離狀態(tài)等等。然后，要想提高效率，免去不必要的麻煩，試用下css預(yù)處理器也很有必要的，比如less sass等等。

以上僅僅是個人意見，有更好的方法思路，也請分享出來談?wù)?。獻(xiàn)丑