1. 重叠的外边距
当上下垂直的外边距同时存在时会发生外边距折叠。就是只保留两个 margin 值中较大的那个。
html:
<div class="div1"> <div class="div2"></div> <div class="div2"></div> </div>
css:
.div1{ width: 600px; height: 200px; border: 1px solid #aaa; margin: 0 auto; } .div2{ width: 50px; margin: 20px; border: 1px solid red; height:50px; }
效果：
2. 重置 css 样式
为了避免不同浏览器的不能默认样式所带来的的麻烦，重置 css 样式无疑是最好的选择。
* { margin: 0; padding: 0; box-sizing: border-box; }
3. 所有元素设置为 Border-box
box-sizing 属性有两个值：
- content-box（默认）：- 内容的实际尺寸。所有的 padding 和边框值都不包含。
- border-box：padding 与边框包含在元素的宽度或高度中。
比如一个元素设置为：width: 100px;box-sizing:border-box, 那么它的总宽就是 100px, 包括：padding 与边框。
4. 短横线命名
当 class 或者 ID 包含多个单词时，应使用连字符（-），CSS 不区分大小写，因此不能使用驼峰式命名。同样，CSS 中也不建议使用下划线连接的命名方式。
5. 不要重复设置
善用继承样式，可以去掉很多重复代码。
6. 使用 transform 属性来创建动画
最好使用 transform() 函数来创建元素的位移或大小动画，尽量不要直接改变元素的 width，height 以及 left/top/bottom/right 属性值。
7. 注意选择器的权重
id>.class>el
8. 慎用!important
因为!important 的权重是最高的，它可以覆盖掉所以的样式
9.em, rem 与 px
- em – 设置元素为 1em，其大小与父元素的 font-size 属性有关。这个单位用于媒体查询中，特别适用于响应式开发，但是由于 em 单位在每一级中都是相对于父元素进行计算的，所以要得出某个子元素 em 单位对应的 px 值，有时候是很麻烦的。
- rem – 相对于 <html> 元素的 font-size 大小计算，rem 使得统一改变页面上的所有标题和段落文本大小变得非常容易。
- px – 像素单位是最精确的，但是不适用于自适应的设计。px 单位是可靠的，并且易于理解，我们可以精细的控制元素的大小和移动到 1px。
- 大型项目使用预处理器
Sass, Less, PostCSS, Stylus 等 css 预处理器。它们提供诸如变量、CSS 函数、选择器嵌套和许多其他很酷的功能，使 CSS 代码更易于管理，特别是在大型项目中。
11. 压缩 CSS 文件
网页首要关注点就是加载速度，压缩文件无疑是其中较好的一种方式。