學習CSS你必須踩得那些坑（二）

利用browser-sync實時刷新頁面

爲了省去每次修改代碼後都要手動刷新頁面，我習慣使用browser-sync監聽文件，自動刷新瀏覽器

1. 安裝Browsersync
npm install -g browser-sync

2. 運行Browsersync
browser-sync start --server --files index.html --files "css/*.css"

引入normalize.css

Normalize.css，保證默認元素在不一樣瀏覽器上變現一致。

Normalize.css 只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的CSS reset，Normalize.css是一種現代的、爲HTML5準備的優質替代方案。——來，讓咱們談一談 Normalize.css

導航頁面

根據設計稿，咱們把整個頁面分爲三個部分，頭部、內容區域、頁腳

<header class = "site__header">      

</header>

<main class = "site__main">      

</main>

<footer class = "site__footer">

 </footer>

用BEM做爲CSS的命名規範，雖然site__header醜了點，可是在你代碼愈來愈多的時候，這個東西可讓你的代碼沒那麼混亂。