编码规范

1. 所有命名都使用英文小写
2. 命名用引号包裹
3. 用中横线连接
4. 命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)
5. tab 用两个空格表示
6. css的 :后加个空格， {前加个空格
7. 每条声明后都加上分号，都要换行，而不是放到一行
8. 颜色用小写，用缩写, 如#fff
9. 小数不用写前缀, 0.5s -> .5s；0不用加单位
10. 尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px

垂直居中有几种实现方式

• 4种

1. 动态高度垂直居中
   • 设置上下padding相等
   • demo
2. 绝对定位实现居中
   • demo
3. vertical-align实现居中
   • demo
4. table-cell实现居中
   • demo

伪类和伪元素

伪类

• 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化

  
  伪类列举.png

伪元素

• 伪元素用于创建一些不在文档树中的元素，并为其添加样式。

伪元素.png

伪元素应用(4个)

• 清除浮动

.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

• 替代标签
  • 范例
    • demo1
    • demo2
    • demo3
• 自定义checkbox
  • 范例
    • demo
• 字体图标
  • 范例
    • demo
    • 参考

伪类与伪元素参考文章

• Alloy Team - 总结伪类与伪元素
• W3C - Pseudo-elements and pseudo-classes
• W3C - Pseudo-elements and pseudo-classes 翻译版