1.Normalize.css

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

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

2.box-sizing:border-box;

为百分比宽度的容器设置padding时，容器的宽度就会像外扩展相应的padding值，要使宽度不被撑开，那么就是用box-sizing:border-box，会控制这种情况，现在我就是在这种情况下使用box-sizing的。

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

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

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

3.-webkit-appearance:none;

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

以下CSS能不让Safari调皮：

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

4.清除浮动

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

background：QAQ。

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