记录一些 css 的奇淫技巧
重置 css 样式
normalize.css 是比较好的选择 [下载地址](http://necolas.github.io/normalize.css/)
尽量不要用 `* {margin: 0; padding: 0;}`
给每个元素添加 ` box-sizing: border-box` 属性，避免后续使用 padding 或者 border 带来的计算烦恼
善假于物
一句话，善用开源已有的代码，不要总是闭门造车或者从零开始。
很多效果在 github 上都有成熟的代码，拿来主义可以让你快速完成的效果，就不要自己一点点从零实现啦，比如这个非常好用的加载动画
[text-spinners](https://github.com/maxbeier/text-spinners)
表格的双倍边框
表格可以自动按照内容分配列宽，但是其自带的双倍边框异常难看，解决办法 `border-collapse: collapse`
权重的分配
css样式权重：!important > style > id > class > tag， 在 css 中保持低权重是非常重要的，否则有时候你会发现代码更换了样式
却不能正常生效，一般来说，尽量不要使用 !important 和 style 是一种好的布局习惯
id 最高效的选择器，直接用 id，不要这样 div#my-div， 直接 #my-div 就好
慎用群组 `div>p>span>a` 或者 `div p span a` 诸如此类，最好别用
属性选择器简直是 bug 级的存在，`div[calss="my-div"]` 诸如此类，万不得已也不能用
命名是个学问
推荐使用 '-' 作为连字符，推荐看一看这个网站，会给你很深的启发[nec css](http://nec.netease.com/standard/css-sort.html)
继承！！继承！！！
css 有很多可以继承得来的属性，记住他们能够省却你一部分时间，常用的继承属性有哪些呢？
**color, cursor,** direction,
font-family, font-size, font-style,**font-weight, font,**
letter-spacing, line-height, list-style-image, list-style-position, list-style-type, **list-style,**
**text-align,** text-indent, text-transform,
visibility, **whitespace, word-spacing**
动画
很多页面动画都可以使用 css3 的 animation 以及 transform + translate 来实现了
pre换行显示
如果制作 pdf 的时候需要展示源代码并且代码块自动换行，试一试：
white-space: pre-line 或 pre-wrap;
word-break: break-word;
word-wrap: break-word;
img 自适应居中
横向居中：父元素 `text-align: center`
横向纵向居中：父元素 'display: flex;' img 'margin: auto;'、
按钮不可用状态
禁止鼠标点击 `pointer-events: none;`
大写字母
css 属性 `text-transform: uppercase;` 很容易就能帮你实现大小写字母的转换
文字模糊
利用 text-shadow 配合前景色透明 `color: transparent;text-shadow: black 0 0 2px;`
文字垂直从右到左显示
设置文字向古代文书一样显示 `writing-mode: vertical-rl;`
can I use 查询兼容性
css 浏览器兼容自动填充
一些插件很容易帮你实现 css3 属性的浏览器兼容，我用 Autoprefixer [地址](https://www.npmjs.com/package/autoprefixer)
