学习静态页面设计的这几个礼拜，从懵懂到熟知、熟用、熟解，可以说总结了一些小经验吧，在设计时会方便、快捷地写代码，而且稳定不乱，很好检查，在这里分享给大家！如有补充，还望不谅想赐~
1.注意外边距折叠
与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个
2.使用flex进行布局
浮动和inline-block虽然也能实现很多的布局效果，但它们本质上是文本和块元素布局的工具，而不是面向整个网页的。flex可以很容易的按照我们预期的方式创建布局。flex拥有一组面向“弹性容器”的属性和一组面向“弹性项目”的属性，一旦你学会了它们，做任何响应式布局都是小菜一碟。
3.重置元素的CSS样式
尽管这些年来有了很大的改善，但是不同浏览器对于各种元素的默认样式仍然存在很大的差异。解决这个问题的最佳办法是在CSS开头为所有的元素设置通用的CSS Reset重置代码，这样你是在没有任何默认内外边距的基础上进行布局，于是所产生的效果也就是统一的。
4.所有元素设置为Border-box
大多数初学者都不知道box-sizing这个属性，但实际上它非常重要。box-sizing属性有两个值：
content-box（默认） - 当我们设置一个元素的宽度或高度时，就是设置它的内容的大小。所有的padding和边框值都不包含。例如，一个div的宽度设置为100，padding为10，于是这个元素将占用120像素（100+2*10）。
border-box - padding与边框包含在元素的宽度或高度中，一个设置为width: 100px和box-sizing:
border-box的div元素，他的总宽度就是100px，无论它的内边距和边框有多少。
将所有元素都设置为border-box，可以更轻松的改变元素的大小，而不必担心padding或者border值会将元素撑开变形或者换行显示。
5.将图片作为背景
当给页面添加图片时，尤其需要图片是响应式的时候，最好使用background属性来引入图片，而不是<img>标签。这看起来使用图片会更复杂，但实际上它会使设置图片的样式变得更加容易。有了background-size, background-position和其它的属性，保持或改变图片原始尺寸和宽高比会更方便.
6.更好的表格边框
HTML中的表格总是很难看的。它们很难做成响应式的，而且总体上很难改变样式。有很多重复的边框，看起来很不好看。这里有一个快速的方法来删除所有的双倍边框：border-collapse: collapse，只需设置这个属性后，表格的边框看起来就顺眼多了.
7.更友好的注释
CSS也许不是一种编程语言，但其代码仍然需要文档化。添加一些简单的注释可以将代码分类区分，方便自己和同事后期维护。
8.短横线命名
当class或者ID包含多个单词时，应使用连字符（-），CSS不区分大小写。
9.不要重复设置
大多数CSS属性的值都是从DOM树中向上一级的元素继承的，因此才被命名为级联样式表。以font属性为例-它总是从父级继承的，您不必为页面上的每个元素都单独设置。
10.使用transform属性来创建动画
最好使用transform()函数来创建元素的位移或大小动画，尽量不要直接改变元素的width，height以及left/top/bottom/right属性值。transform以及它的所有函数（translate, rotate, scale等）几乎没有浏览器兼容性问题。
11.不要DIY，多使用代码库
CSS社区非常庞大，不断有新的代码库出现。它们有各种用途，从微小的片段到构建响应式应用程序的整体框架。其中大多数也是开源的。
12.保持选择器的低权重
外部>内部>行内，*<标签<类选择器<id<行内<important.(越精确权重越高)
13.尽量不要使用!important
14.Em, Rem与px
（1）em - 设置元素为1em，其大小与父元素的font-size属性有关。这个单位用于媒体查询中，特别适用于响应式开发，但是由于em单位在每一级中都是相对于父元素进行计算的，所以要得出某个子元素em单位对应的px值，有时候是很麻烦的。
（2）rem - 相对于<html>元素的font-size大小计算，rem使得统一改变页面上的所有标题和段落文本大小变得非常容易。
（3）px - 像素单位是最精确的，但是不适用于自适应的设计。px单位是可靠的，并且易于理解，我们可以精细的控制元素的大小和移动到1px。
15.对于大型项目使用预处理器
Sass, Less, PostCSS, Stylus都是预处理器。预处理器是CSS的未来。它们提供诸如变量、CSS函数、选择器嵌套和许多其他很酷的功能，使CSS代码更易于管理，特别是在大型项目中。
16.使用AutoPrefixer达到更好的兼容性
可以自动为我们提供添加浏览器前缀的功能，甚至可以决定需要支持哪些浏览器：
在线工具：Autoprefixer
文本编辑器插件：Sublime Text, Atom
代码库：Autoprefixer (PostCSS)
17.压缩CSS文件
为了提高网站和应用程序的加载速度和页面负载，使用压缩后的资源。压缩版本的文件将删除所有空白和重复，从而减少总文件的体积。有许多不同的方法来压缩CSS代码：
在线工具：CSS Minifier, CSS Compressor
文本编辑器插件： Sublime Text, Atom
代码库： Minfiy (PHP), CSSO, CSSNano (PostCSS, Grunt, Gulp)
18.Caniuse
使用caniuse来检查您使用的属性是否得到了广泛的支持，是否需要前缀，或者是否在某个浏览器中使用有要注意的地方。
19.验证
验证CSS可能不像验证HTML或JavaScript代码那么重要，但是通过工具运行一下你的代码仍然非常有用.
免费的工具可以利用：
在线工具：W3 Validator, CSS Lint
文本编辑器插件：Sublime Text, Atom
代码库：stylelint (Node.js, PostCSS), css-validator (Node.js)
