1. Normalize.css

Normalize.css 是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。

通常如果我没有使用前端框架（如：BootStrap），我就会在页面头部引用它，它解决了各个浏览器的渲染差异。

2. box-sizing: border-box;

为百分比宽度的容器设置 padding 时，容器的宽度就会向外扩展相应的 padding 值，要使宽度不被撑开可以使用 box-sizing: border-box。

做自适应网页时你就会知道它有多么好用了，而且目前主流浏览器均支持了该属性。

如果你想更激进一点，可以使用一下CSS全局定义。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

3. -webkit-appearance: none;

Safari喜欢给按钮、输入框加些阴影，然后让他们更圆一些：

1208114596.png

以下CSS能不让Safari调皮：

input,textarea {
  -webkit-appearance: none;
}

4. 清除浮动

float 属性很好用，但是不能让父元素撑开。

background：QAQ。

相信很多同学已经知道了使用 clear:both 清除浮动方法，其实还有一种方法更加好用，就是在父元素使用 display:table，将对象作为块元素级的表格显示，这样父元素也可以被正常撑开。