说来惭愧自认为对css了解，但在项目中却很少有正确的使用css，如果面向对象的css吧，其实也不是不想用而是css天生就是面向对象的，高度可重用，但是如果把每个都单独提取，难免会有过多的class以及自己也比较懒。
你要干嘛就选择什么样的标签，命名也一样。从内容本质出发，它是干什么的。
微型格式，如果某些内容需要的标签没有，可以使用class来代替 class="vcard"联系信息。
通过需求和流程图可以事先考虑如何布局使用什么元素。
标签的使用：
ul无序列表
ol有序列表
dl>dt+dd描述内容 可以用在商品之类的描述上
blockquote描述,q短描述 cite引用 可以用在用户评论上
em强调
css属性
用outline替代border这样就不用再减border的值了或者使用box-sizing:border-box;
又想设置高度有想高度自适应可以使用min-height
box-sizing
表示width宽度包含哪些,默认值是content-box表示width只包括内容宽度
媒体查询
@media screen and (min-width:640px)
screen屏幕(width:xx)包括浏览器滚动条
only对不支持该语法的浏览器隐藏此规则
not如果浏览器不满足设置的条件可以通过not来设置
- 通过device-width可以获取设备宽和高不包括浏览器滚动条。
- 通过orientation特性可以根据屏幕的宽度和高度的比较设计不同样式。orientation:landscape当浏览器宽度大于高度的时候会被匹配成功，而portrait则相反。我们可以用它来实现响应式的导航。
- touch-enabled可以匹配触摸屏
通过媒体查询和rem实现响应式字体大小
html{
font-size:10px;
}
@media only device-width and (min-width:360px) {
html{
font-size: 11px!important;
}
}
@media only device-width and (min-width:400px) {
html{
font-size: 13px!important;
}
}
@media only device-width and (min-width:1000px) {
body{
max-width:640px;
margin:0 auto;
}
}
iPhone、iPad，和Android等设备会通过四个屏幕侧边中较短的一对去测量device-width。也就是说，给定尺寸为320×480的设备，不管是以纵向还是横向模式去查看，device-width都会是320px。
网页字体
@font-face定义字体规则
@font-face{
font-family:字体名;
src:local('字体名'),url('你要导入的字体路径') format('字体类型')
}
local使用源字体的名称去检查字体是否已经安装在用户的机器上；url提供一个指向字体的路径，当字体在本地不可用时使用；而format指定字体的类型
通过font-family:字体名,来使用，并且可以覆盖字符。
兼容IE9以下
src:url('xx.eot')；
ie9以下支持eot格式，不支持local
为了兼容强制下载所定义的字体
local('☺')
可以指定多个url路径以,分割达到兼容的效果。
更简单的兼容方法
@font-face{
font-family:name;
src:url('filename.eot?') format(eot),
url('filename.woff') format('woff'),
url('filename.otf') format ('opentype'),
url('filename.svg#filename') format('svg');
}
@font-face生成器（http://www.fontsquirrel.com/fontface/generator/）。只要简单上传你要使用的字体文件，@font-face生成器就会将其转化为所有相关的格式——而且还可以生成需要在页面中使用的CSS。
font-stretch属性，它告诉浏览器显示的字体风格要比当前更窄一些。
使用font-size-adjust属性。该属性可以动态修改font-size属性。
文本效果
text-shadow:x y blur-radius color
文字阴影,支持多重阴影用，分割
-webkit-text-stroke:width color
描边
-webkit-text-fill-color:color
填充，对字符的轮廓进行描边
text-overflow:ellipsis
用省略号替换超出的文字
white-space:nowrap;
防止文本被折叠成多行
注意还需要加overflow:hidden;并且宽度。
resize:both;
改变元素大小
text-align:justify;
文本两端对齐
text-align-last
设置最后一段文本的对齐方式
多列布局
column-count:number
要分成几列
column-width:单位
根据屏幕宽度自动分列
column-gap:单位
边界间隔
column-rule:1px solid red;
分界线
背景
一个元素支持多个背景图片以,分割
background-size
对背景图片进行缩放
background-clip:border-box、content-box、padding-box
背景裁剪,它会设置盒模型的那一部分成为背景（颜色或图片）显示的界限
background-origin:border-box、content-box、padding-box
设置背景开始计算的点
background-repeat:space、round
space:平铺且不被裁剪或缩放的最大数量的图片，并且在显示时会有空白区域出现在它们中间
round:水平和垂直填充包含元素的图片的最大完整数量
background-image:image-rect(url,top,right,bottom,left)
背景图片裁剪,解决图片精灵问题
mask:url repeat x y;
遮罩
border-radius
边框
border-image
边框图片
box-shadow:inset x y radius spread color
盒子阴影,radius:模糊半径,spread:阴影扩散的距离
rgba值只能应用到它指定的元素上,所以子元素可以否决所有的继承。
currentColor表示当前color颜色值
appearance:button、radio-button、password...
使用来自操作系统的不同地方的颜色。
2D变换-transform
允许多重变换以空格隔开 transform:rotate(10deg) skew();
transform:rotate(10deg);
旋转
transform-origin:x y;
改变原点,transform属性中默认的原点是水平垂直中心
translate(x,y)
平移,该函数可将元素从它的默认位置进行移动
translate非常类似于使用相对定位以及left和top属性，但请记住，经过变换的元素会保留它的位置，只是从显示上看起来像被移动过，被变换的是元素的图像，而不是元素本身。
skew(x,y)
倾斜
scale(x,y)
缩放
matrix
矩阵
box-reflect:direction offset image;
反射
transition:property time ease、linear、ease-in、ease-out、ease-in-out delay
过渡
动画
@keyframes声明关键帧
@keyframes 'name'{
keyframes{
property:value;
}
}
通过animation来调用
animation:name time ease、linear、ease-in、ease-out、ease-in-out delay count direction
名字 持续时间 运动方式 延迟 执行次数(infinite重复播放) 方向(normal或者alternate反向播放)
播放状态
animation-play-state:running|paused
running表示动画正在播放，而paused表示动画未在播放
允许多重动画。
3D变换
transform-style:preserve-3d;
perspective
透视
perspective-origin
transform-origin
变换原点