學 CSS 的過程裡，最難熬的莫過於就是你想要的版面，網頁上就是怎樣都呈現不出來，或是它就是任性的亂跑，不出現在你想要的位置 ?

有時候是自己忘記存檔，然後就很覺得自己很北七；有時候是自己寫的樣式沒寫到對的地方，導致瀏覽器沒吃到。又很怕自己亂改語法被改掉就毀了。

這時候瀏覽器 Chrome 的檢查功能就超好用的！
叫出檢查元素有幾個方式：

• 對著瀏覽器按右鍵
  

• Ctrl + Shift + I

• 直接按 F12 也可以！

叫出來之後右邊那塊就會有一個充滿語法的欄位：

這時候如果你想知道你寫的東西為什麼沒有被寫進去，就可以從這邊檢查，如果是連右邊語法都沒有看到你寫的東西，那極有可能是你沒存檔之類的。若是你想改顏色等等也可以在這邊直接改

css 代入的顏色、border、display-inline-block 等等都會顯示在這邊，因此可以從這邊直接更改，也不用特別儲存檔案，就不用怕會把原始的程式碼搞爆了XD

如果你覺得看語法找網頁對應的 div 太麻煩，Chrome 很貼心地在左上角有一個游標，只要點下去游標，再移到左邊網頁上點你要更改的部分，右邊就會跳出那一區塊的語法囉！

前面有提到不用儲存就可以即時看到網頁變更，這是優點也是缺點，因為這樣如果你一次改太多，可能會忘記自己改過什麼而無法存檔。不過它的名字就叫「檢查」元素，顧名思義就是要讓你檢查錯誤原因，不是要讓你在這邊 coding 的啦～