CSS3

CSS选择器

CSS3选择器规范地址： [https://www.w3.org/TR/2011/REC-css3-selectors-20110929/](地址)
CSS3选择最新选择器规范： [https://www.w3.org/TR/selectors](地址)  

!---问题---!
	 1. css的全称是什么？
	 2. 样式表的组成
	   规则 
	   选择器+声明块
	   声明
	   CSS属性+CSS属性值组成的键值对
	 3. 浏览器读取编译css的顺序？(从右往左)
复制代码

1. 基本选择器

    /*通配符选择器*/		* { margin: 0; padding: 0; border: none; }
    /*元素选择器*/		body { background: #eee; }
    /*类选择器*/		.list { list-style: square; }
    /*ID选择器*/		#list { width: 500px; margin: 0 auto; }
    /*后代选择器*/		.list li { margin-top: 10px; background: #abcdef; }
   复制代码

2. 基本选择器扩展

    /*子元素选择器*/		#wrap > .inner {color: pink;}
    			也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素
    /*相邻兄弟选择器*/	#wrap #first + .inner {color: #f00;}
    			它只会匹配紧跟着的兄弟元素
    /*通用兄弟选择器*/	#wrap #first ~ div { border: 1px solid;}
    			它会匹配所有的兄弟元素(不需要紧跟)
    /*选择器分组*/		h1,h2,h3{color: pink;}  
    			此处的逗号我们称之为结合符
   复制代码

3. 属性选择器

    /*存在和值属性选择器*/	
    	[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
    	[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
    	[attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。
    
    /*子串值属性选择器*/
    	 [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
    	 [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
    	 [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
    	 [attr*=val] : 选择attr属性的值中包含字符串val的元素。
   复制代码

4. 伪类与伪元素选择器（出现的目的是让CSS有能力选中DOM以外的东西（如状态）)

    /*链接伪类*/		注意:link，:visited，:target是作用于链接元素的！
    		:link		表示作为超链接，并指向一个未访问的地址的所有锚
    		:visited	表示作为超链接，并指向一个已访问的地址的所有锚
    		:target 	代表一个特殊的元素，它的id是URI的片段标识符(可实现选项卡）
    /*动态伪类*/		注意:hover，:active基 可以作用于所有的元素！
    		:hover		表示悬浮到元素上
    		:active		表示匹配被用户激活的元素（点击按住时）
    		
    		由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签
    		身上时 :link和:visited不能放在最后！！！
    		
    		隐私与:visited选择器
    			只有下列的属性才能被应用到已访问链接：
    				color
    				background-color
    				border-color
    /*表单相关伪类*/
    		:enabled	匹配可编辑的表单
    		:disable	匹配被禁用的表单
    		:checked	匹配被选中的表单
    		:focus		匹配获焦的表单
    		
    /*结构性伪类*/
    		index的值从1开始计数！！！！
    		index可以为变量n(只能是n)
    		index可以为even odd
    			#wrap ele:nth-child(index)		表示匹配#wrap中第index的子元素 这个子元素必须是ele
    			#wrap ele:nth-of-type(index)	表示匹配#wrap中第index的ele子元素
    			除此之外:nth-child和:nth-of-type有一个很重要的区别！！
    					nth-of-type以元素为中心！！！
    					
    		:nth-child(index)系列			
    			:first-child
    			:last-child
    			:nth-last-child(index)
    			:only-child	(相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
    		:nth-of-type(index)系列
    			:first-of-type
    			:last-of-type
    			:nth-last-type(index)
    			:only-of-type	(相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
    			
    		:not		
    		:empty(内容必须是空的，有空格都不行，有attr没关系)
    /*伪元素*/
    		::after：`::after`用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合   content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
    		::before
    		::firstLetter `::first-letter会`选中某 [block-level element]（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容
    		::firstLine
    		在某 [block-level element]（块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。
   复制代码

和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的html元素。

::first-line 伪元素只能在块容器中,所以: ::first-line伪元素只能在一个display值为block inline-block, table-cell 或者 table-caption中有用.。在其他的类型中，::first-line 是不起作用的. ::selection ::selection CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设 备选中的部分）。

5. css声明的优先级

    选择器的特殊性
    	选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如    0,0,0,0
    	一个选择器的具体特殊性如下确定：
    	       1.对于选择器中给定的ID属性值，加 0,1,0,0
    	       2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0
    	       3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1
    	       4.通配符选择器的特殊性为0,0,0,0
    	       5.结合符对选择器特殊性没有一点贡献
    	       6.内联声明的特殊性都是1,0,0,0
    	       7.继承没有特殊性
   
    		特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)
    		选择器的特殊性最终都会授予给其对应的声明
    		如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势
   
    		注意：id选择器和属性选择器
    		      div[id="test"]（0,0,1,1） 和 #test（0,1,0,0）   
      
    重要声明
    	有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明
    	并允许在这些声明的结束分号之前插入  !important  来标志
    	必须要准确的放置  !important 否则声明无效。 
    	!important 总是要放在声明的最后，即分号的前面
    	 
    	 标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。
    	 实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决
    	 非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决
    	 如果一个重要声明与非重要声明冲突，胜出的总是重要声明
   
    继承
    	继承没有特殊性，甚至连0特殊性都没有
    	0特殊性要比无特殊性来的强
    来源
    	css样式的来源大致有三种
    	  创作人员
    	  读者
    	  用户代理   
    	 
    	权重：
    	   读者的重要声明
    	   创作人员的重要声明
    	   创作人员的正常声明
    	   读者的正常声明
    	   用户代理的声明
    层叠
    	1.找出所有相关的规则，这些规则都包含一个选择器
    	2.计算声明的优先级
                   先按来源排序
                   在按选择器的特殊性排序
                   最终按顺序
   复制代码

自定义字体和字体图标

自定义字体

	@font-face
	字体图标
		1.制作一套矢量图
		2.将矢量图与字符进行绑定
		3.使用工具或者站点生成一套字体
		4.最终使用
	 字体兼容处理网站
       [https://www.fontsquirrel.com/tools/webfont-generator]()
    icomoon字体图标
       [https://icomoon.io/#home]()
复制代码

新的UI方案

一.文本新增样式

1. 文本阴影

text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边）

默认值：none 不可继承

值

<color>
   可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）选择的颜色。
<offset-x> <offset-y>
   必选。这些长度值指定阴影相对文字的偏移量。
   <offset-x> 指定水平偏移量，若是负值则阴影位于文字左边。        
   <offset-y> 指定垂直偏移量，若是负值则阴影位于文字上面。
   如果两者均为0，则阴影位于文字正后方(如果设置了<blur-  radius> 则会产生模糊效果)。
<blur-radius>
   可选。这是 <length>值。如果没有指定，则默认为0。
   值越大，模糊半径越大，阴影也就越大越淡
复制代码

2. 文字描边

只有webkit内核才支持：-webkit-text-stroke（准确的来说不能算是css3的东西，但需要大家知道）

3. 文字排版

   direction:控制文字的方向 一定要配合unicode-bidi:bidi-override;来使用 text-overflow :确定如何向用户发出未显示的溢出内容信号。 它可以被剪切 clip， 显示一个省略号（'...' ） 怎么溢出显示省略号语句如下： white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 包裹区域必须不能让子元素撑开

二、盒模型

1. 盒模型新增样式

   1）box-shadow

    	关键字(内 外阴影)
    	length(x轴的偏移量)
    	length(y轴的偏移量)
    	length(模糊程度)
    	length(阴影面积)
    	color(阴影颜色)
   复制代码

   如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text shadows 规 则相同(第一个阴影在最上面)。

   默认值: none 不可继承

   值：

   inset

   默认阴影在边框外。
   使用inset后，阴影在边框内。
   
    <offset-x> <offset-y>
   这是头两个 <length> 值，用来设置阴影偏移量。
    <offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。
    <offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。
   如果两者都是0，那么阴影位于元素后面。
   这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。
   复制代码

   这是第三个 值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。 这是第四个 值。取正值时，阴影扩大；取负值时，阴影.收缩。默认为0，此时阴影与元素同样大。 阴影颜色，如果没有指定，则由浏览器决定

   2）text-shadow

    	length(x轴的偏移量)
    	length(y轴的偏移量)
    	length(模糊程度)
    	color(阴影颜色)
   复制代码

2. 倒影（webkit内核 文字描边 背景镂空）

    渐变倒影
     -webkit-box-reflect  设置元素的倒影（准确的来说不能算是css3的东西，但需要大家知道）
      默认值:none  不可继承
   复制代码

   值：（必须是123的顺序） 倒影的方向 第一个值，above, below, right, left 倒影的距离 第二个值，长度单位 渐变 第三个值

3. resize CSS 属性允许你控制一个元素的可调整大小性。 （一定要配合overflow：auto使用） 默认值：none 不可继承 值： none 元素不能被用户缩放。 both 允许用户在水平和垂直方向上调整元素的大小。 horizontal 允许用户在水平方向上调整元素的大小。 vertical 允许用户在垂直方向上调整元素的大小。

4. box-sizing border-box：代表元素上设置的width和height表示的是border-box尺寸 content-box：代表元素上设置的width和height表示的是content-box尺寸(默认值)

三、新增UI样式

4. 圆角border-radius 传统的圆角生成方案，必须使用多张图片作为背景图案 CSS3圆角的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点：
   • 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。    * 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。    * 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况 border-radius 用来设置边框圆角。当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果。 默认值 : 0 不可继承

值： 固定的px值定义圆形半径或椭圆的半长轴，半短轴。不能用负值 使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。不能用负值 这是一个简写属性，用来设置 border-top-left-radius, border-top-right-radius, border-bottom-right-radius ， border-bottom-left-radius 半径的第一个语法取值可取1~4个值: border-radius: radius
border-radius: top-left-and-bottom-right top-right-and-bottom-left border-radius: top-left top-right-and-bottom-left bottom-right border-radius: top-left top-right bottom-right bottom-left

   半径的第二个语法取值也可取1~4个值
       border-radius: (first radius values) / radius             
       border-radius: (first radius values) / top-left-and-bottom-right      top-right-and-bottom-left 
       border-radius: (first radius values) / top-left     top-right-and-bottom-left     bottom-right 
       border-radius: (first radius values) / top-left     top-right     bottom-right       bottom-left 

   注意
  百分比值
   在旧版本的 Chrome 和 Safari 中不支持。(fixed in Sepember 2010)
   在 11.50 版本以前的 Opera 中实现有问题。
   Gecko 2.0 (Firefox 4) 版本前实现不标准：水平半轴和垂直半轴都相对于盒子模型的宽度。
   在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。
复制代码

4. 层级 a.浮动提升半层，只有在浮动的情况下，才需要考虑元素分两层 定位元素提一层 相对定位会在文档流你有残留 b.z-index为1怎么都会比a高;z-index为-1怎么都会比a低

5. 包含块 初始包含块：和视窗大小位置尺寸一样的矩形 滚动系统滚动条会不会影响初始包含块的位置？ 会 禁止系统滚动条 html,body{ height:100%; overflow:hidden } 怎么解决ie6下固定定位失效的问题？ 用绝对定位来模拟固定定位 1.禁止系统滚动条 2.将滚动条作用在最外层的包裹器上或者在body上 3.因为移动包裹器或者body身上的滚动条并不会影响初始包含块的位置 所以一个按照初始包含块定位的元素就不会产生移动

6. 边框图片、 border-image CSS属性允许在元素的边框上绘制图像。。这使得绘制复杂的外观组件更加简单，使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式 border-image-source: none border-image-source 属性定义使用一张图片来代替边框样式；如果只为none，则仍然使用border-style 定义的样式。默认值：none 不可继承 border-image-slice: 100% border-image-slice 属性会通过规范将 border-image-source 的图片明确的分割为9个区域：四个角，四边以及中心区域。并可指定偏移量。默认值：100% 不可继承。值得百分比参照于image本身！！ border-image-width: 1 border-image-width 定义图像边框宽度。 默认值：1 不可继承 border-image-outset: none border-image-outset属性定义边框图像可超出边框盒的大小。默认值：0 不可继承。正值： 可超出边框盒的大小 border-image-repeat: stretch border-image-repeat 定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。默认值：stretch 不可继承 值： stretch （拉伸） repeat，round（平铺）

7. 背景 css2 background-color 平铺整个border-box background-image 默认从padding-box开始绘制，从border-box开始剪裁 css3中有多背景，默认绘制时尺寸是自己的位图像素 background-repeat 控制平铺与否 background-position 控制背景图片在背景区域中的位置 px 百分比 参照于背景区域减去背景图片的位图像素值 background-attachment scroll：默认值，背景图不会随着元素滚动条的滚动而滚动 fixed：背景图铺在视口中固定定位了 css3 background-origin: 设置背景的渲染的起始位置 border-box padding-box content-box background-clip:设置背景裁剪位置

    	background-size : 设置背景图片大小   默认值：auto auto  不可继承
                值：
          百分比：  指定背景图片相对背景区（background positioning area）的百分比。背景区由 
                          background-origin设置，默认为盒模型的内容区与内边距
             auto：  以背景图片的比例缩放背景图片。
             注意：
                 单值时，这个值指定图片的宽度，图片的高度隐式的为auto
                 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度      
    		    图片是自适应的
   复制代码

8. 渐变

CSS 渐变 是在 CSS3 Image Module 中新增加的图片类型；使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。

浏览器支持两种类型的渐变：线性渐变 (linear)，通过 linear-gradient 函数定义，以及 径向渐变 (radial)，通过 radial-gradient 函数定义.

1)线性渐变 (linear) 为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）。你还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

• 默认从上到下发生渐变

  linear-gradient(red,blue);

• 改变渐变方向：（top bottom left right）

  linear-gradient(to 结束的方向,red,blue);

• 使用角度

  linear-gradient(角度,red,blue);

• 颜色节点的分布（第一个不写为0%，最后一个不写为100%）

  linear-gradient(red 长度或者百分比,blue 长度或者百分比);

• 重复渐变

  repeating-linear-gradient(60deg,red 0,blue 30%);

2. 径向渐变 (radial) radial-gradient() 函数创建一个，用来展示由原点（渐变中心）辐射开的颜色渐变

• 默认均匀分布

  radial-gradient(red,blue);

• 不均匀分布

  radial-gradient(red 50%,blue 70%);

• 改变渐变的形状

  radial-gradient(circle ,red,blue)

  circle

  ellipse（默认为椭圆）

-渐变形状的大小 radial-gradient(closest-corner circle ,red,blue) closest-side 最近边 farthest-side 最远边 closest-corner 最近角 farthest-corner 最远角 （默认值）

-改变圆心 radial-gradient(closest-corner circle at 10px 10px,red,blue);
9. 如何实现一张图片的垂直水平居中 body{ text-align: center; } body:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; } img{ vertical-align: middle; } 另一种方案： img{ position:absolute left:0 right:0 bottom:0 top:0 margin:auto }

再一种 *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; background: pink; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; }

过渡（transition）

transition：
众所周知，css效率极高，其变化的过程往往都是在一瞬间完成，速度极快。 CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义 简写属性transition: transition是一个简写属性，用于 transition-property,transition-duration,transition-timing-function, 和transition-delay。 CSS 过渡 由简写属性 transition 定义是最好的方式，可以避免属性值列表长度不一，节省调试时间

默认值： transition-delay: 0s transition-duration: 0s transition-property: all transition-timing-function: ease

注意 在transition属性中，各个值的书写顺序是很重要的：第一个可以解析为时间的值会被赋值给transition-duration，第二个可以解析为时间的值会被赋值给transition-delay

推荐抒写顺序 过渡时间 过渡样式 过渡形式 延迟时间 [，过渡时间 过渡样式 过渡形式 延迟时间]

兼容性 transition 可以不用厂商前缀，不过鉴于标准刚刚稳定，对于基于 Webkit的浏览器仍然需要厂商前缀。如果想兼容旧版本的浏览器那么也需要厂商前缀（例如Firefox 15 及之前版本, Opera 12 及之前版本)

1）transition-property ：指定应用过渡属性的名称(宽度、高度等) 默认值为 all，表示所有可被动画的属性都表现出过渡动画(developer.mozilla.org/zh-CN/docs/…)

可以指定多个 property

属性值： none 没有过渡动画。 all 所有可被动画的属性都表现出过渡动画。 IDENT 属性名称 （可以指定多个）

2）transition-duration：属性以秒或毫秒为单位指定过渡动画所需的时间。 默认值为 0s ，表示不出现过渡动画。（0也要带单位）

可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。

属性值 以毫秒或秒为单位的数值 类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。一定要加单位(不能写0 一定要写0s 1s,0s,1s)！

3）transition-timing-function： CSS属性受到 transition的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变 默认值：ease

你可以规定多个timing function,通过使用 transition-property属性，可以根据主列表(transition property的列表)给每个CSS属性应用相应的timing function.如果timing function的个数比主列表中数量少，缺少的值被设置为初始值（ease） 。如果timing function比主列表要多，timing function函数列表会被截断至合适的大小。这两种情况下声明的CSS属性都是有效的。

属性值： 1、ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). 2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0). 3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0). 4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0). 5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 6、cubic-bezier： 贝塞尔曲线 7、step-start：等同于steps(1,start) step-end：等同于steps(1,end) steps(,[,[start|end]]?) 第一个参数：必须为正整数，指定函数的步数 第二个参数：指定每一步的值发生变化的时间点（默认值end）

4）transition-delay：属性规定了在过渡效果开始作用之前需要等待的时间。 默认值：0s

你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变

属性值 值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

5）检测过渡是否完成 当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd （每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件） transtionend事件（DOM2） 在每个属性完成过渡时都会触发这个事件 当属性值的列表长度不一致时 跟时间有关的重复列表 transition-timing-function使用默认值 在transition完成前设置 display: none，事件同样不会被触发

2D变换：transform

1）旋转（rotate） transform:rotate(angle); 只能转一次 正值:顺时针旋转 rotate(360deg) 负值:逆时针旋转 rotate(-360deg) 只能设单值。正数表示顺时针旋转，负数表示逆时针旋转 2） 平移（translate） X方向平移:transform: translateX(tx) Y方向平移:transform: translateY(ty) 二维平移：transform: translate(tx[, ty])； 如果ty没有指定，它的值默认为0。

可设单值，也可设双值。 正数表示XY轴正向位移，负数为反向位移。设单值表示只X轴位移，Y轴坐标不变， 例如transform: translate(100px);等价于transform: translate(100px,0); 3）倾斜（skew） transform:skewX(45deg); X方向倾斜:transform: skewX(angle) skewX(45deg):参数值以deg为单位 代表与y轴之间的角度 Y方向倾斜:transform: skewY(angle) skewY(45deg):参数值以deg为单位 代表与x轴之间的角度 二维倾斜:transform: skew(ax[, ay]); 如果ay未提供，在Y轴上没有倾斜 skew(45deg,15deg):参数值以deg为单位 第一个参数代表与y轴之间的角度 第二个参数代表与x轴之间的角度 单值时表示只X轴扭曲，Y轴不变，如transform: skew(30deg);等价于 transform: skew(30deg, 0); 考虑到可读性，不推荐用单值，应该用transform: skewX(30deg);。skewY表示 只Y轴扭曲，X轴不变

正值:拉正斜杠方向的两个角 负值:拉反斜杠方向的两个角
4）缩放（scale） transform:scale(2); X方向缩放:transform: scaleX(sx); Y方向缩放:transform: scaleY(sy); 二维缩放 :transform: scale(sx[, sy]); (如果sy 未指定，默认认为和sx的值相同)

要缩小请设0.01～0.99之间的值，要放大请设超过1的值。 例如缩小一倍可以transform: scale(.5); 放大一倍可以transform: scale(2);

如果只想X轴缩放，可以用scaleX(.5)相当于scale(.5, 1)。 同理只想Y轴缩放，可以用scaleY(.5)相当于scale(1, .5)

正值:缩放的程度 负值:不推荐使用（有旋转效果） 单值时表示只X轴,Y轴上缩放粒度一样，如transform: scale(2);等价于transform: scale(2,2);

5）基点的变换 transform-origin transform-origin CSS属性让你更改一个元素变形的基点。

6）矩阵（matrix） 了解 在 2D变换 中，矩阵变换函数 matrix() 接受 6个值，语法形式如下： transform: matrix(a, b, c, d, e, f);
这相当于，对元素应用一个如下的变换矩阵：
点(Xi,Yi,1)进行变换后的新坐标
即根据变换矩阵进行变换之后点 (xi,yi) 的坐标是(axi+cyi+e,bxi+dyi+f)

变换的天坑： a.过渡只关系元素的初始状态和结束状态，没有方法可以获取元素在过渡中每一帧的状态 b.元素在初次渲染还没有结束的时候，是没有办法触发过渡的 c.在绝大部分变换样式的切换时，变换组合的个数或位置不一样时，是没有办法触发过渡的

3D变换：transform

在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外

1. 3D旋转 CSS3中的3D旋转主要包括四个功能函数 rotateX(angle)、

   rotateY(angle)、
       
   rotateZ(angle)、等价于rotate(angle)
       
   rotate3d(x,y,z,angle)
            x, y, z分别接受一个数值(number),用来计算矢量方向(direction vector)，矢量方向是三维空间中的一条线, 从坐标系原点到x, y, z值确定的那个点，元素围绕这条线旋转angle指定的值
   复制代码

2. 3D平移 transform: translateZ(length)是3D Transformaton特有的，其他两个2D中就有 translateZ 它不能是百分比 值; 那样的移动是没有意义的。 transform: translate3d(translateX,translateY,translateZ); translateZ 它不能是百分比 值; 那样的移动是没有意义的。

3. 3D缩放 transform: scaleZ(number) transform: scale3d(scaleX,scaleY,scaleZ);

如果只设置scaleZ(number)，你会发现元素并没有被扩大或压缩，scaleZ(number)需要和translateZ(length)配合使用，number乘以length得到的值，是元素沿Z轴移动的距离，从而使得感觉被扩大或压缩

4. 景深（perspective）（作用给子元素）: 景深（英语：Depth of field, DOF）景深是指相机对焦点前后相对清晰的成像范围。 简单的理解，景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好，在我们CSS3中，perspective用于激活一个3D空间，属性值就是景深大小（默认none无景深） 应用景深的元素称为“舞台元素”，舞台元素的所有后代元素都会受影响，（如果后代元素中也添加了perspective属性，效果会叠加而不是覆盖）

景深:让3D场景有近大远小的效果（我们肉眼距离屏幕的距离） 是一个不可继承属性，但他可以作用于后代元素（不是作用于本身的） 原理： 景深越大 灭点越远 元素变形更小 景深越小 灭点越近 元素变形更大

transform: perspective(depth); depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值 若使用perspective()函数，那么他必须被放置在transform属性的首位，如果放在其他函数之后，则会被忽略

perspective: depth; 同perspective()函数一样，depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。他们唯一的区别是，perspective属性是被用于元素的后代元素，而不是元素本身；就是说，为某个元素设置perspective属性后，是对这个元素的子元素起作用，而不是这个元素本身。

perspective-origin（景深的原点位置，即灭点位置） 同perspective属性，也是设置在父元素上，对后代元素起作用。 这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素，Z轴是被perspective属性设置的 5. transform-style 营造有层级的3d舞台，是一个不可继承属性，他作用于子元素 这个属性指定了子元素如何在空间中展示，只有两个属性值：flat（默认）和preserve-3d flat 表示所有子元素在2D平面呈现， preserve-3d 表示所有子元素在3D平面呈现，

如果被扁平化，则子元素不会独立的存在于三维空间。 因为该属性不会被（自动）继承，所以必须为元素所有非叶后代节点设置该属性。
6. backface-visibility backface-visibility属性用来设置，是否显示元素的背面，默认是显示的。 backface-visibility: keyword; keyword有两个值，hidden和visible，默认值是visible。

动画

人类具有视觉暂留的特性，人的眼睛在看到一幅画或一个物体后，在0.34秒内不会消失。 动画原理： 通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理， 在一幅画还没有消失前，播放下一幅画。就会给人造成一种流畅的视觉变化效果。

css3动画 使元素从一种样式逐渐变化为另一种样式的效果

animation属性是一个简写属性形式: （可以用来描述可动画的属性） 可动画属性的列表： developer.mozilla.org/en-US/docs/…

简写属性animation animation： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

   在每个动画定义中，顺序很重要：可以被解析为 <time>的第一个值被分配给animation-duration, 第二个分配给 animation-delay。
复制代码

1. animation-name: animiationName animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列 值: none 特殊关键字，表示无关键帧。 keyframename 标识动画的字符串 @keyframes语法： @keyframes animiationName{ keyframes-selector{ css-style; } }

   animiationName:必写项，定义动画的名称 keyframes-selector：必写项，动画持续时间的百分比 from：0% to：100% css-style：css声明

2. animation-duration （改变关键帧的执行方向，还会影响animation-timing-function的形式） animation-duration属性指定一个动画周期的时长。 默认值为0s，表示无动画。

值 一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。 注意：负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s 3. animation-timing-function animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。 对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始，到关键帧结束。

动画的默认效果：由慢变快再变慢

linear:线性过渡，等同于贝塞尔曲线（0,0,1,1） ease:平滑过渡，等同于贝塞尔曲线（0.25,0.1,0.25,1.0） ease-in:由慢到快，等同于贝塞尔曲线（0.42,0,1,1） ease-out:由快到慢，等同于贝塞尔曲线（0,0,0.58,1 ） ease-in-out:由慢到快再到慢，等同于贝塞尔曲线（0.42,0,0.58,1） cubic-bezier(1,1,2,3)

steps(n,[start|end]) 传入一到两个参数，第一个参数意思是把动画分成 n 等分，然后动画就会平均地运行。 第二个参数 start 表示从动画的开头开始运行，相反，end 就表示从动画的结尾开始运行， 默认值为 end。

4. animation-delay 定义动画开始前等待的时间,以秒或毫秒计(属于动画外的范畴) 值: 从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(m s)。如果未设置单位，定义无效
5. animation-iteration-count （重复的是关键帧） 定义了动画执行的次数（属于动画内的范畴,只作用于动画内的属性） 值 infinite 无限循环播放动画. 动画播放的次数 不可为负值.
6. animation-direction 定义了动画执行的方向 值 normal 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始， 这是默认属性。 alternate 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向， 比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代 reverse（反转的 也是关键帧） 反向运行动画，每周期结束动画由尾到头运行。 alternate-reverse 反向交替， 反向开始交替
7. animation-fill-mode 属于动画外的范畴，定义动画在动画外的状态 1.animation-fill-mode: none 2.animation-fill-mode: backwards backwards：from之前的状态与form的状态保持一致 3.animation-fill-mode: forwards forwards：to之后的状态与to的状态保持一致 4.animation-fill-mode: both botn：backwards+forwards
8. animation-play-state 定义了动画执行的运行和暂停 值 running 当前动画正在运行。 paused 当前动画以被停止。

flex布局

steps(num,[start/end])

num:拆成多少步（当吗num为12时，整个动画最好有13帧）
start：看不见第一帧
end：看不见最后一帧

transform只能使用在块级元素上！！！
复制代码

flex捋一捋

0.flex frog练习
	http://flexboxfroggy.com/
	
1.flex基础点
	---什么是容器，什么是项目，什么是主轴，什么是侧轴？
	---项目永远排列在主轴的正方向上
	---flex分新旧两个版本
		-webkit-box
		-webkit-flex / flex

2.注意点
	---我们都知道新版本的flex要比老版本的flex强大很多，有没有必要学习老版本的flex？
		移动端开发者必须要关注老版本的flex
			因为很多移动端设备内核低只老版本的flex
	
	---老版本的box通过两个属性四个属性值控制了主轴的位置和方向
	      新版本的flex通过一个属性四个属性值控制了主轴的位置和方向

3.老版本
	容器
		容器的布局方向
			-webkit-box-orient:horizontal/vertical
			控制主轴是哪一根
				horizontal：x轴
				vertical  ：y轴
		容器的排列方向
			-webkit-box-direction：normal/reverse
			控制主轴的方向
				normal：从左往右（正方向）
				reverse：从右往左（反方向）
		富裕空间的管理
			只决定富裕空间的位置，不会给项目区分配空间
			主轴
				-webkit-box-pack
					主轴是x轴
						start：在右边
						end:	在左边
						center：在两边
						justify：在项目之间
					主轴是y轴
						start：在下边
						end：在上边
						center：在两边
						justify：在项目之间
			侧轴
				-webkit-box-algin
					侧轴是x轴
						start：在右边
						end：  在左边
						center：在两边
					侧轴是y轴
						start：在下边
						end：   在上边	
						center：在两边
	项目
		弹性空间管理
			-webkit-box-flex：弹性因子（默认值为0）
					
4.新版本
	容器
		容器的布局方向
		容器的排列方向
			flex-direction
			控制主轴是哪一根，控制主轴的方向
				row;		从左往右的x轴	
				row-reverse;从右往左的x轴
				column;		从上往下的y轴
				column-reverse;从下往上的y轴
		富裕空间的管理
			只决定富裕空间的位置，不会给项目区分配空间
			主轴
				justify-content
						flex-start：		在主轴的正方向
						flex-end:		在主轴的反方向
						center：			在两边
						space-between：	在项目之间
						 space-around：  在项目两边
						
			侧轴
				align-items
						flex-start：在侧轴的正方向
						flex-end：    在侧轴的反方向
						center：		在两边
						base#ne    基线对齐
     					stretch		等高布局（项目没有高度）	
	项目
		弹性空间管理
			flex-grow：弹性因子（默认值为0）
			flex-grow： 
        可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
        可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
         每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))           
          
			
5.新版本新增的
	容器
		flex-wrap：控制的是侧轴的方向
			nowrap 不换行
			wrap   侧轴方向由上而下 			（flex-shrink失效）
			wrap-reverse 侧轴方向由下而上 	（flex-shrink失效）
		
		align-content：多行/列时侧轴富裕空间的管理（把多行/列看成一个整体）
		
		flex-flow：flex-direction和flex-wrap的简写属性
			本质上控制了主轴和侧轴分别是哪一根，以及他们的方向
	
	项目
		order:控制项目的排列顺序
		align-self：项目自身富裕空 间的管理
		flex-shrink：收缩因子（默认值为1）
		flex-basis：伸缩规则计算的基准值（默认拿width或height的值）

6.伸缩规则
	flex-basis（默认值为auto）
	flex-grow（默认值为0）
		可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
		可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
		每项伸缩大小 = (伸缩基准值flex-basis + (可扩展空间 x flex-grow值))
	flex-shrink（默认值为1）
		   --.计算收缩因子与基准值乘的总和  
		   			var a = 每一项flex-shrink*flex-basis之和
		   --.计算收缩因数
		                     收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和   
		             var b =  (flex-shrink*flex-basis)/a
		   --.移除空间的计算
		                      移除空间= 项目收缩因数 x 负溢出的空间 
		             var c =    b * 溢出的空间      

7.侧轴富裕空间的管理
	单行单列
		align-items
		align-self（优先级高）
	多行多列
		align-content		  
复制代码

8.flex的简写属性 flex:1 (flex-basis:0% flex-grow:1 flex-shrink:1)
等分布局

响应式布局核心 CSS3媒体查询选择器

@media 媒体类型 and(关键字) 带条件的媒体属性 and 带条件的媒体属性 { //规则 }

媒体类型 all screen print

媒体属性

  width：浏览器的窗口尺寸
  device-width：设备尺寸
  device-pixel-ratio（必须加webkit前缀）：像素比
     ---以上三个媒体属性可加 min 和 max 前缀
           min：最小值为谁
           max：最大值为谁

  横竖屏切换
     orientation：landscape（横屏）
     orientation：portrait （竖屏）
复制代码

关键字 only：处理浏览器尽量问题 老版本的浏览器只支持媒体类型，不支持带媒体属性的查询 @media screen{} @media only{} and：连接一条查询规则 ,：连接多条查询规则 not：取反

多列布局

规范

HTML 什么叫html5? 是一个强大的技术集（html5 ~ html+css+js） CSS 什么是css3？ css3其实就是html5的一部分，而且现代前端中已经没有版本的概念，都是级别 JS ECMASCRIPT DOM BOM（没有规范，window）

预处理器（less）

变量 @ 变量的延迟加载 变量是块级作用域 嵌套 &:平级 混合 什么是混合？ 将一系列的规则集引入另一个规则集中（ctrl c+ctrl v） 混合的定义在less规则有明确的指定，使用.的形式来定义 普通混合（编译到原生css中的） 不带输出的混合（加双括号） 带参数的混合 带默认值的混合 匹配模式 arguments 计算 加减乘除 计算的一方带单位就可以 继承

转载于:https://juejin.im/post/5ca6f2a6f265da308e50c8b1