translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）2、translateX(x)仅水平方向移动（X轴移动）3、translateY(Y)仅垂直方向移动（Y轴移动）

 -webkit-transform: translate(50px,100px);
  -moz-transform:translate(50px,100px);
  transform: translate(50px,100px);

缩放 scale()函数 让元素根据中心原点对对象进行缩放。

 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴

div:hover {  -webkit-transform: scale(1.5,0.5);
  -moz-transform:scale(1.5,0.5)
  transform: scale(1.5,0.5);}

Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。

2、scaleX(x)元素仅水平方向缩放（X轴缩放）

3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

hover 代表鼠标浮动在元素上方时

结合transform属性

scale（缩放倍数）

0.01-0.99 之间是是缩小

〉1.01 的值 代表是放大

opacity不透明度条件

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。transform --> 元素的改变 transform:rotate() --> 作用用于旋转 transform:skew() --> 作用用于元素的倾斜显示

rotate：通过指定的角度参数对原元素指定一个2D rotation（2D旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):

-ms-transform:rotate(7deg); //-ms代表ie内核识别码

-moz-transform:rotate(7deg); //-moz代表火狐内核识别码

-webkit-transform:rotate(7deg); //代表谷歌【chrome】/苹果【safari】内核识别码

-o-transform:rotate(7deg); //-o代表欧朋【opera】内核识别码

transform:rotate(7deg); //统一标识语句。这句话也写下去，符合w3c标准

span属于行内元素,一开始旋转不需要display:block,是因为旋转的是div这个块,而span被包含在div内,旋转时不受影响,后面旋转却是单独针对文本,所以需要将行内元素转变成块级元素

a为元素的水平伸缩量，1为原始大小；

b为纵向扭曲，0为不变；

c为横向扭曲，0不变；

d为垂直伸缩量，1为原始大小；

e为水平偏移量，0是初始位置；

f为垂直偏移量，0是初始位置

清除浮动影响的两种方法：overflow：hidden 和clear：both；

当元素设置了浮动以后，那么这个元素就会脱离正常文档流，那么在他后面的正常文档流的元素就会占据他的位置，从而使得不能和预期一致。

要解决这个问题我们可以简单的在浮动元素后面添加一个高度和这个浮动元素一样的块级元素（这个元素是正常文档流元素），那么就可以在视觉上和预期一致。

利用:after（before）可以轻易实现

readonly="readonly"只可读 read-write{}设置不是只读控件的文本框样式要想使用read-write和read-only，只有配合Input[type="类型"]使用，不能直接input:read-only

:read-write ==> 文本框为非只读 :read-only  ==> 文本框为只读

:read-only

给只读选项设置样式(就是说无法修改此文本框HTML文件里type里写入readonly="readonly"css里写入

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}

)

：-moz-read-only

给火狐浏览器兼容 

placeholder="中国上海"预览显示中国上海

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。

::-moz-selection {
  background: red;
  color: green;
}
::selection {
  background: red;
  color: green;
}

opacity: 1;透明度100%

z-index:1; 叠在上面

vertical-align: middle; 垂直居中

input[type="checkbox"]:checked + span {
  opacity: 1;

“:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。:disabled”选择器，给不可用输入框设置明显的样式。

input[type="text"]:disabled {
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.15);
  color: rgba(0,0,0,.15);
}

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。

nput[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。

 div:only-of-type {
  background: orange;
}

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

.post p:only-child {
  background: orange;
}

:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。

 p:nth-last-of-type(3){
  background: orange;
}