CSS3中的九大特性

1.CSS3选择器

基本选择器
属性选择器
伪类选择器
CSS3结构类：nth选择器

2.CSS3边框与圆角

border-radius:可以为元素添加圆角边框（块元素，行内块元素，行内元素）
border-image:可以为图片添加边框
box-shadow:可以控制一个或多个下拉阴影的框

3.CSS3背景

background-image:背景图片
background-clip:指定背景的绘制区域
background-origin:设置背景图像的原始起始位置
background-repeat:设置是否及如何重复图像，默认地，背景图像在水平和垂直方向上重复
bakground-size:指定背景图像的大小

4.CSS3渐变

定义:可以在两个或多个指定的颜色之间显示平移的过度

线性渐变:沿着一根轴线改变颜色，从起点到终点进行顺序渐变
径向渐变:从起点到终点，颜色从内向外进行圆形渐变

5.CSS3过渡

定义:允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值。

transition

transition-property:width //property为定义过渡的css属性名，比如：color,width

transition-duration:2s; //设置对象过渡的持续时间

transition-timing-function:ease;//设置对象中过渡的动画类型,即规定过渡效果的速度曲线,比如说ease-平滑、linear:线性过渡(匀速)

transition-delay:5s //过渡延迟5s进行

6.CSS3变换

rotate()旋转:通过指定一个角度参数，对元素指定一个2D的旋转
translate()平移:根据X轴和Y轴的位置给定参数,使当前元素位置移动
scale()缩放:设置元素的缩放程度
skew()扭曲/倾斜:设置元素的倾斜状态
变换基点

3D 略

7.CSS3动画

定义:使元素从一种样式逐渐变化到另外一种样式的效果

@keyframes

定义：keyframes关键帧，用来决定动画变化的关键位置

注意：keyframes 控制关键位置，并不是所有的位置

语法：@keyframes animationname{ keyframes-selector{ cssStyles; } }

animationname：必写项，定义动画的名称

keyframes-selector：必写项，动画持续时间的百分比 0% - 100%之间，或者使用form和to关键字也可以设置，form代表0%，to代表100%

示例：

@keyframes abc {

from{transform: rotate(0)}

50%{transform:rotate(90deg)}

to{transform: rotate(360deg)}

}

animation属性

1.animation-name属性

设置对象所应用的动画名称

语法：

animation-name：keyframename | none

参数说明：

keyframename：指定要绑定到选择器的关键帧的动画名称

2.animation-duration属性

定义：设置对象动画的持续时间

语法：

animation-duration：time

参数说明：指定对象播放完成需要花费的时间，默认值是0

3.animation-timing-function属性

定义：设置对象动画的过渡类型，即规定动画的速度曲线

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。

语法：animation-timing-function: value;

参数说明：与transition-timing-function属性的参数一样

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

亲自试一试 - 实例
实例 1 为了更好地理解不同的定时函数值，这里提供了设置五个不同值的五个不同的 div 元素：

/* W3C 和 Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari 和 Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

8.flex布局（重点）

传统的布局：围绕盒子模型（border、margin、padding）定位（position）、浮动（float）等。

flex布局又叫弹性布局 ，主要内容包括两大部分有：容器（父元素）的六个属性和项目（子元素）的六个属性

基本概念：采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

一、容器的六个属性：

1、flex-direction属性：决定主轴的方向，有四个属性值 row | row-reverse | column | column-reverse;

row：默认，主轴为水平方向，起点在左端；

row-reverse：主轴在水平方向，起点在右端；

column：主轴在垂直方向，起点在上边；

column-reverse：主轴在垂直方向，起点在下边；

2、flex-wrap属性：决定当一条轴线排不下所有的项目时，是否换行，有三个属性值：nowrap | wrap | wrap-reverse;

nowrap:默认，不换行，当排不下时，会按项目的flex-shrink属性（见下，项目的缩小比例，默认为1）的值来对项目进行缩小；

wrap：换行，第一行在上方；

wrap-reverse：换行，第一行在下方；

3、flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为 row nowrap

4、justify-content属性：定义了项目在主轴上的对齐方式，有五个属性值：flex-start | flex-end | center | space-between | space-around

flex-start：默认值，主轴上起点对齐；

flex-end：主轴上终点对齐；

center：在主轴上居中；

space-between：两端（起点和终点）对齐，项目之间的间隔都相等；

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

具体的视觉上的对齐方式与主轴的方向有关，在主轴方向为默认情况下（主轴为水平方向，起点在左端）：

flex-start：左对齐；

flex-end：右对齐；

center：水平居中；

space-between：两端（左右两边）对齐，项目之间的间隔都相等；

space-around：每个项目两侧（左右两侧）的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍；

5、align-items属性：定义项目在交叉轴上的对齐方式，有五个属性值：flex-start | flex-end | center | baseline | stretch;

flex-start：默认值，交叉轴上起点对齐；

flex-end：交叉轴上终点对齐；

center：在交叉轴上居中；

baseline：

stretch：

stretch（默认值）：轴线占满整个交叉轴。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

二、项目的属性

1、order属性：定义项目的排列顺序，数值越小排列越靠前，默认为0，

order：整数

2、flex-grow属性：定义项目的放大比例，当有剩余空间时即会根据该值进行放大，默认为0，即有剩余空间时也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3、flex-shrink属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效

4、flex-basis属性：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

5、flex属性：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

6、align-self属性：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

9.@media媒体查询

在CSS3中多媒体查询@media又是响应式布局

响应式布局

　　优点：一个页面适用多个设备手机，ipad，pc端

　　缺点：会导致代码冗余

设备分类：

　　1.all 所有设备

　　2.print 打印机

　　3.screen 电脑，智能手机，ipad 常用

　　4.speech 屏幕阅读器等发声设备

多媒体查询筛选条件：

　　1.not 否定条件

　　　　条件写到设备类型前面

　　　　@media not screen and(min-width:960px) and (max-width:1200px){}

　　2.only 仅仅

　　　　条件写到设备前面

　　　　@media only screen (min-width:960px) and (max-width:1200px){}

　　3.查询公式

　　　　@media only screen (min-width:960px) and (max-width:1200px){}

CSS3中新增特性