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

不過在這之前，你需要對css屬性有些足夠上的認識，以及在顯示其效果的時候可能會出因為不同環境下，導致的不同的樣子的結果顯示。

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

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

什么是疏忽上的出錯誤?

這個就是在編寫大量的樣式的額時候，可能會因為手誤，將一些不是正確解析的符號敲進去或者是漏掉了某些規則符號，導致無法解析顯示出來。

每當有顯示的樣式的時候，出現的不是我們的預期

在確認上面無誤的 之后，我們先看下錯誤的效果，設想下可能導致這些效果的原因

- 是不是因為層級的問題

- 是不是因為某些常用的方法順帶出現的一些異常情況沒有回避，比如，需要清除浮動、inline-block之間有空隙、需要溢出顯示的地方設置了overflow：hidden、某些樣式設置會出現層級上的變化，還有一些設定必須要有其他的樣式設置才有效果等等。

- 針對渲染出來的盒子模型，以及相關的屬性樣式數據，這里我用chrome devtools截圖給大家看看

可以看到這里可以看到他的結構，某個節點計算出來的額樣式，和當前瀏覽器解析后計算出來樣式，都可以很直觀的看出當前錯誤的顯示跟預期的差別，從而找出問題的根源。還又右上角那個塊，很直觀的看出前盒子模型的數據。

每當有顯示的樣式的時候，出現的不是我們的預期

最后就是針對我們設想的預期效果，一步一步分析，逐步對照，實現的效果，需要哪些樣式，要用到那些手法，

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