開發人員工具提示：如何檢查 CSS 格線

Sofia Emelianova

Chrome 開發人員工具提供多種視覺化選項，讓 CSS 格線版面配置的偵錯作業更直覺。

請觀看影片，瞭解如何在「Elements」面板中切換格線疊加層，並使用格線疊加層來執行下列操作：

• 以圖表呈現並檢查格狀版面配置。
• 請參閱列和欄編號，以便在放置格線項目時參照。
• 如果格線項目很多，且數字難以辨識，請使用線條和區域名稱，並在疊加圖層上顯示。
• 檢查軌道大小。

此外，您也可以使用「元素」 >「樣式」窗格中的 格線編輯器，在格線版面配置中對齊項目及其內容，只要按一下按鈕即可，不必輸入 CSS 規則。

如要進一步瞭解實作經驗，請參閱「檢查 CSS 格線」教學課程。