学习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丑了点，但是在你代码越来越多的时候，这个东西可以让你的代码没那么混乱。