杂

1 box-sizing: 有三个属性： 分别是content-box(默认)  padding-box  border-box

　　(1) content-box:不将padding和border计算入width中

　　(2) padding-box:不将border计算入width中 但将padding计算入width中(在火狐好用，在谷歌效果和content-box 一样)

　　(3) border-box : 将border和padding全部计算入width中

话不多说 直接上例子

　　

 

2  -webkit-text-size-adjust : none; 因为chrome默认最小字体为12px 当设置了比12px更小的字体时默认时无效的 ，但是设置了以上属相以后，就可以使用比12px更小的字体了，但这样耶带来了个弊端，当用户缩放时 字体时不能缩放 固定的。

　　那么另一个解决办法是 transform: scale(0.875);

3 transform :有四种方法 ，分别是 scale(缩放) ， skew(倾斜) ， rotate(旋转) ， translate(平移)

　　transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);四种方法能同时写 但是不同的顺序会导致不同的结果

4 transition :transition是个简写属性 用于设置四个过度属性

　　(1) transition-property: 规定设置过度效果的css属性的名称

　　(2) transition-duration：规定完成过度需要多少时间（必须 为0时不会产生过度效果）

　　(3) transition-timing-function : 规定速度效果的速度曲线

　　(4) transition-delay : 定义过度效果何时开始

直接上例子：比如说我要控制一个div在2s内旋转45deg

 

5 animation 

6 user-select: none 用户不能选择元素中的任何内容

7 vertical-align: 垂直对其方式 只对inline-block起作用