介绍一下常用html字符实体
 空格
<小于号
>大于号
&和号
"引号
&apos单引号（IE不支持）
¥人民币元
§小节
©版权符号
®注册商标
&trade注册商标
×乘号
÷除号
如果需要更多的字符实体请查阅W3C手册
锚点的写法：<a name="wdzp">我的作品</a>
<a id="wdzp">我的作品</a>
<a href = "1.html#wdzp">点击进入我的作品</a>
多媒体标签embed(应该会使用，近期的网站大多数都会用儿)
<embed src="" autostart=true loop=2 hidden=true starttimes=mm:ss volume=32 height = 30 width = 20 units="pixels en" controls=console smallconsole playbutton pausebutton stopbutton volumelever name=""title="" palette=color|color(第一个是前景色，第二个是背景色 color可以是颜色名还可以是RRGGBB还可以是transparent align=basiline middle absmiddle absbottom) allowFullScreen
embed可以用来插入各种多媒体，格式可以使Midi、Wav、AIFF、AU、MP3等等
url为视频或者音频文件常常用于相对路径和绝对路径
以前用iframe标签第三方视频网站引入，但是缺点会有广告丫
transform:skew(30deg,0deg);
该实例通过skew方法把元素水平上倾斜30度，处置方向保持不变
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0
2d x y
3d x y z
translate(x,y)
scale(x,y)
rotate(deg)
transform-origin可以调整元素转换变形的原点
transform:translate(-50%,-50%);/* 走的自己的一半 */
audio音频
video视频（autoplay controls loop width height）
一般 .webm格式 占用空间很小 设置成响应式布局也能进行缩放 ogg mpeg4
input[type=submit]属性选择器
div::before div::after 伪元素选择器
01 转换ico图标
我们可以自己做的图片，转换为ico图标，以便放到我们的站点里面
1，先切图 尽量透明图片png格式 （用那个背景橡皮擦就能使背景透明）
2，把图片转换为图标favicon.ico http://www.bitbug.net/ 比特虫图标生成网站
02关于文字对齐
<style type="text/css">
div{
width:300px;
height:300px;
border:1px solid red;
line-height:30px;
}
span{
display:inline-block;
vertical-align:center;
width:10px;
height:10px;
background-color:pink;
/* maigin-top:10px; */
}
</style>
<body>
<div>
<span></span>文字
</div>
</body>
03 cutterman切图工具
视图-标尺工具 用手拉，可以量宽高
背景橡皮擦-可以擦除背景使背景透明
通栏 和 版心的概念
切片工具切图 或者移动工具单击就可以
选择图层 - 基于图层的切片
窗口扩展功能 cutterman 有个小苹果针对ios所选图层 小机器人针对andriod 电脑针对pc
单击images按钮保存到桌面的文件夹
导出选中图层 然后一步到位 png24 可以选择格式
04 logo制作
div.logo h1>a 按tab键
上来先给宽高 然后给background-color
<style type="text/css">
header{
width:1300px;
height:100px;
background-color: pink;
margin: 0 auto;
padding-top:30px;
}
.logo{
width:195px;
height:42px;
background-color: purple;
}
.logo a {
display: block;
width:195px;
height:42px;
background: url(../images/logo.png) no-repeat;
text-indent:9999px;
overflow:hidden;
}
</style>
<header>
<div class="logo">
<h1>
<a href="#">学成在线</a>
</h1>
</div>
</header>
05 nav的制作
box-sizing:border-box;css3盒子模型
nav>ul>li>a
ctrl+D去掉选区
06search的制作
.search{
width:40px;
height:40px;
float:left;
margin-left:10px;
float:left;
}
input type = search button
outline:none;轮廓线
ctrl+E 合并图层
07 personal的制作
dt dl dd 定义列表
dl>dt+dd
.personal s::before{
content:"";
display:block;
width:6px;
height:3px;
border-radius:50%;
position:absolute;
right:0;
top:0;
}
vertical-align:middle;垂直对齐中线对齐
08 subnan制作
绝对定位
09 circle制作
介绍了css3的一个属性 过渡属性
transition具有颠覆性的特征，我们可以在不使用Flash动画或者JavaScript的情况
下为另一种样式时为元素添加效果
过渡动画：是从一个状态渐渐的过渡到另外一个状态
帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。（animation）
transition: 要过渡的属性 花费时间 运动曲线 何时开始；
如果有多组属性变化，还是用逗号隔开。
transition:transform 过渡动画里面的2d移动效果
transition-property 规定应用过渡的css属性的名称
transition-duration 定义过渡花费的时间，默认是0；
transition-timing-function 规定过渡效果的时间曲线，默认是“ease”.
transition-delay 规定过渡效果何时开始，默认是0.
如果想要所有的属性都过渡，直接写一个all就可以
transition-duration 花费时间 单位是s 这个s单位必须写 ms 毫秒
运动曲线 默认是ease 何时开始 默认是0s立即开始
linear 匀速
ease 逐渐慢下来
ease-in 加速
ease-out 减速
例如：transition: width .3s ease 0s,height 0.3s ; 多组属性
transition:all 0.5s 一般只写前两个
过渡写到本身上 谁做过渡动画写到谁身上
10 京东过渡效果
记住给img标签加transition 不要给盒子加
11京东侧边栏
z-index改变层级
12 2d-移动
transform是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放
甚至支持矩阵的动画知识。可以取代大量之前只能靠Flash才可以实现的效果
变形转换transform transform 变换 变形的意思
移动translate(x,y)
translate 移动平移的意思
移动translate(50px,50px);
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
/* transition过渡 */
transition:all 0.4s;
}
div:hover{
transform:translate(100px,100px)
}
</style>
</head>
<body>
<div>
</div>
</body>
实际应用：可以让定位的盒子水平居中，垂直居中；
transform:translate(-50%,-50%);
transform:translateY(-50%);
transform:translateX(-50%);
translate 如果x -50% 跟父亲没关系，是走自己盒子宽度的一半
2d-缩放 scale(x,y);
transform:scale(0.8,1)
可以对元素进行水平和垂直方向的缩放，该语句使用scale方法使该元素在
水平方向上缩小了20%,垂直方向上不变。
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（x轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scale()的取值默认的值为1,当值设置为0.1到0.9之间的任何值，作用使一个元素缩小
而任何大于1的值都是使元素放大
旋转 rotate(deg);
transform:rotate(90deg);正的顺时针旋转 负的逆时针旋转
transform-origin可以调整元素转换变形的原点
倾斜 skew（deg,deg）
div{transform-origin:left top;transform:rotate(45deg);}
改变元素到原点左上角，然后顺时针旋转45deg;
如果是4个角，可以使用left top这些，如果想要精确的位置，可以用px像素
div{transform-origin: 10px 10px ;transform: rotate(45deg);}
改变元素原点到x,y为10,10然后顺时针旋转45deg;
transform属性可以连写
transform:skew(0,30deg); 按照水平方向Y轴，顺时针旋转。（相当于用上下的力拉盒子的左上角和右下角）按照垂直方向X轴，逆时针旋转（相当于用左右的力拉盒子的左上角和右下角）
transform-origin:left top;
3D变形（CSS3）transform
rotateX()
01 我的课程表
单行文本垂直居中 line-height = 行高
注意盒子的边线重合问题
02拔网站的小工具
仿站小工具 V3.0exe
一个超级好用的仿网站小工具
03精品推荐模块 精品产品模块 页面底部 都是对上面知识的综合应用
选择T工具然后单击文字就能选择文字
移动工具 自动选择改成图层
04动画原理 只有IE9或者以上兼容
animation动画（css3）
动画是css3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组
动画语法格式：
animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向
@keyframes 规定动画
animation 所有动画属性的简写属性，除了animation-play-state属性
animation-name规定@keyframes 动画的名称
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是0；
animation-timing-function 规定动画的速度曲线。默认是"ease"
animation-delay规定动画何时开始，默认是0
animation-iteration-count规定动画的播放次数 默认是1 工作中大多数用infinite表示无限次播放
animation-direction规定动画是否在下一周期逆向的播放。默认是"normal" "alternate"跑马灯轮流反向播放；
animation-play-state规定动画是否正在运行或者暂停。默认是“running”还有暂停"paused";
animation-fill-mode规定动画时间之外的状态
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意
调用动画（相当于函数的调用）
animation: move 3s ease 0s;
声明动画(关键帧）第一种声明方法
@keyframes move {
from {
left:0;
background-color:pink
}to{
left:1000px;
background-color:yellow
}
}
animation具体的用法可以查阅W3C手册属性太多了
动画的缩放效果(心跳效果）
声明动画
@keyframes heart {
0%{
transform:scale(1);
}
50%{
transform:scale(1.1);
}
100%{
transform:scale(1);
}
}
调用动画
animation: heart 0.5s infinite;每隔两秒心跳一次
动画的旋转
animation:rotate linear 2s infinite;
@keyframes rotate{
from{
transform:rotate(0deg);
}
}
to{
transform:rotate(360deg);
}
}
05flex伸缩布局（这个是重中之重）
css3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，
其中可以发挥极大的作用
主轴：flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来
一定的局限性，因为语法规范不一致，致使Flexbox布局使用不多
2、各属性详解
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min-width:280px 最小宽度不能小于280
max-width: 1280px 最大宽度 不能大于1280
2.flex-direction调整主轴方向（默认水平方向）
flex-direction:column垂直排列
flex-direction:row水平排列
http://m.ctrip.com/html5/携程网手机端地址
给父亲添加伸缩布局属性为 display:flex;
平均分三份儿 给儿子们加flex: 1;
<style type="text/css">
section{
width: 80%;
height: 150px;
margin: 100px auto;
display:flex;
min-width:500px;
flex-direction:column;/*列的伸缩布局*/
}
section div {
height: 100%;
flex: 1; /* 孩子的份数 */
}
section div:nth-child(1){
background-color:pink;
flex: 2; /* 偏袒孩子 */
}
section div:nth-child(2){
background-color:purple;
width:30px; /* 固定的宽剩下两个平均分配 */
}
section div:nth-child(3){
background-color:blue;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
手机移动端最小的屏幕 min-width: 320px 还有常用的 540 640 750 等手机屏幕和dpi有关，后面继续学习
em字体宽度单位 rem单位和js搭配使用实现响应式布局
后面还要学到一个display:table 表格模式布局
文字阴影
又是一个css3的属性
以后我们可以给我们的文字添加阴影效果了
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色
h-shadow 必须，水平阴影的位置。允许负值
v-shadow 必须，垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色。
前两项是必须写的，后两项可以选写
背景渐变
在线性渐变过程中，颜色沿着一条直线过渡，从左侧到右侧，从右侧到左侧，从顶部到底部，从底部到顶部
如果你曾经使用过制作图件，比如photoshop，你对线性渐变并不会陌生
这个东西兼容问题很严重，我们只说一说线性渐变（当做了解的知识）
语法格式：
background:-webkit-linear-gradient(渐变的起始位置，起始颜色， 结束颜色)
background:-webkit-linear-gradient(渐变的起始位置，颜色 位置， 颜色 位置)
background:-webkit-linear-gradient（left top,red,green）;
background:-webkit-linear-gradient (top,red 0%,green 50%,blue 100%);
背景缩放
ios在作图的时候要按照原来精灵图的两倍去做图，再进行背景缩放。不然的话ios的图片会出现失真现象
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动web开发中做屏幕，其参数
设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b）设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域
background-image:url("imgs/gyt.jpg");
background-size:300px 100px 针对父元素设置背景图像的宽度和高度，如果第一个值不设，第二个值则为auto
background-size:contain;把背景图片扩展至足够大，以使其背景图像完全覆盖背景区域
背景图像的某些部分也许无法显示在背景定位区域中。
background-size:cover;把背景图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域
优雅降级和渐进增强(根据用户的需求而定)
什么是渐进增强 、优雅降级呢？
渐进增强
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高版本浏览器进行效果、交互等的改进
类似爬山，由低处往高处爬
优雅降级
一开始就构建完整的功能，然后再针对低版本浏览器兼容
类似蹦极：由高处往低处落
区别：渐进增强是向上兼容，优雅降级是向下兼容
浏览器前缀名称
-webkit- Google Chrome,Safari,Andriod Browser
-moz- firefox
-o- Opera
-ms- internet Explorer,Edge
-khtml- konqueror 已淘汰
移动
translateX(x)
仅水平方向移动（x轴移动）
translateY(y)
仅垂直方向移动（Y轴移动）
translate3d(x,y,z)
其中 ，x和y可以是长度值，也可以是百分比，百分比时相对于其本身元素水平方向的宽度和垂直方向值
多背景
以逗号分隔可以设置多背景，可用于自适应布局 做法就是用逗号隔开就好了
一个元素可以设置多重背景图像
每组属性间使用逗号分隔
如果设置的多重背景图之间存在着交集（即存在着重叠关系，前面的背景图会覆盖后面的背景图）
background:url(test1.jpg) no-repeat scroll 10px 20px/70px 90px
background:rgba(255,0,0,.2)盒子的背景透明
apacity:0.2 盒子本身半透明
filter:alpha(opacity=20);
动画
声明动画
@keyframes move{
from{
left:0;
background-color:pink;
}
to{
left:1000px;
background-color:yellow;
}
3D变形
2d x y
3d x y z
左手坐标系
伸出左手，让拇指和食指呈“L”型，大拇指向右，食指向上，中指指向前方，这样我们就建立了一个左手
直角坐标系
食指和中指的指向正好和坐标轴的正反方向相反这就是屏幕上的3D坐标轴
rotateX()
就是沿着x立体旋转单位是deg
rotateY()
沿着y轴旋转
rotateZ()
沿着Z轴旋转
skew(deg,deg)属性
skew(x,y）属性x 的值是沿着图形的左上角和右下角进行左右拉拽
属性y 的值是沿着图形的左上角和右下角进行上下拉拽
透视（perspective）
电脑显示屏是一个2D平面，图像之所以有立体感（3D效果），其实只是一种视觉呈现，通过透视可以将
一个2D平面，在旋转的过程中，呈现3D效果
透视原理：近大远小
浏览器透视：把近大远小的所有图像，透视在屏幕上
perspective:视距，表示视点距离屏幕的长短，视点用于模拟透视效果时人眼的位置
注意：并非任何情况下需要透视效果，根据开发需要进行设置
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
backface-visibility
属性定义当元素不面向屏幕时是否可见
backface-visibility:hidden;
 空格
<小于号
>大于号
&和号
"引号
&apos单引号（IE不支持）
¥人民币元
§小节
©版权符号
®注册商标
&trade注册商标
×乘号
÷除号
如果需要更多的字符实体请查阅W3C手册
锚点的写法：<a name="wdzp">我的作品</a>
<a id="wdzp">我的作品</a>
<a href = "1.html#wdzp">点击进入我的作品</a>
多媒体标签embed(应该会使用，近期的网站大多数都会用儿)
<embed src="" autostart=true loop=2 hidden=true starttimes=mm:ss volume=32 height = 30 width = 20 units="pixels en" controls=console smallconsole playbutton pausebutton stopbutton volumelever name=""title="" palette=color|color(第一个是前景色，第二个是背景色 color可以是颜色名还可以是RRGGBB还可以是transparent align=basiline middle absmiddle absbottom) allowFullScreen
embed可以用来插入各种多媒体，格式可以使Midi、Wav、AIFF、AU、MP3等等
url为视频或者音频文件常常用于相对路径和绝对路径
以前用iframe标签第三方视频网站引入，但是缺点会有广告丫
transform:skew(30deg,0deg);
该实例通过skew方法把元素水平上倾斜30度，处置方向保持不变
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0
2d x y
3d x y z
translate(x,y)
scale(x,y)
rotate(deg)
transform-origin可以调整元素转换变形的原点
transform:translate(-50%,-50%);/* 走的自己的一半 */
audio音频
video视频（autoplay controls loop width height）
一般 .webm格式 占用空间很小 设置成响应式布局也能进行缩放 ogg mpeg4
input[type=submit]属性选择器
div::before div::after 伪元素选择器
01 转换ico图标
我们可以自己做的图片，转换为ico图标，以便放到我们的站点里面
1，先切图 尽量透明图片png格式 （用那个背景橡皮擦就能使背景透明）
2，把图片转换为图标favicon.ico http://www.bitbug.net/ 比特虫图标生成网站
02关于文字对齐
<style type="text/css">
div{
width:300px;
height:300px;
border:1px solid red;
line-height:30px;
}
span{
display:inline-block;
vertical-align:center;
width:10px;
height:10px;
background-color:pink;
/* maigin-top:10px; */
}
</style>
<body>
<div>
<span></span>文字
</div>
</body>
03 cutterman切图工具
视图-标尺工具 用手拉，可以量宽高
背景橡皮擦-可以擦除背景使背景透明
通栏 和 版心的概念
切片工具切图 或者移动工具单击就可以
选择图层 - 基于图层的切片
窗口扩展功能 cutterman 有个小苹果针对ios所选图层 小机器人针对andriod 电脑针对pc
单击images按钮保存到桌面的文件夹
导出选中图层 然后一步到位 png24 可以选择格式
04 logo制作
div.logo h1>a 按tab键
上来先给宽高 然后给background-color
<style type="text/css">
header{
width:1300px;
height:100px;
background-color: pink;
margin: 0 auto;
padding-top:30px;
}
.logo{
width:195px;
height:42px;
background-color: purple;
}
.logo a {
display: block;
width:195px;
height:42px;
background: url(../images/logo.png) no-repeat;
text-indent:9999px;
overflow:hidden;
}
</style>
<header>
<div class="logo">
<h1>
<a href="#">学成在线</a>
</h1>
</div>
</header>
05 nav的制作
box-sizing:border-box;css3盒子模型
nav>ul>li>a
ctrl+D去掉选区
06search的制作
.search{
width:40px;
height:40px;
float:left;
margin-left:10px;
float:left;
}
input type = search button
outline:none;轮廓线
ctrl+E 合并图层
07 personal的制作
dt dl dd 定义列表
dl>dt+dd
.personal s::before{
content:"";
display:block;
width:6px;
height:3px;
border-radius:50%;
position:absolute;
right:0;
top:0;
}
vertical-align:middle;垂直对齐中线对齐
08 subnan制作
绝对定位
09 circle制作
介绍了css3的一个属性 过渡属性
transition具有颠覆性的特征，我们可以在不使用Flash动画或者JavaScript的情况
下为另一种样式时为元素添加效果
过渡动画：是从一个状态渐渐的过渡到另外一个状态
帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。（animation）
transition: 要过渡的属性 花费时间 运动曲线 何时开始；
如果有多组属性变化，还是用逗号隔开。
transition:transform 过渡动画里面的2d移动效果
transition-property 规定应用过渡的css属性的名称
transition-duration 定义过渡花费的时间，默认是0；
transition-timing-function 规定过渡效果的时间曲线，默认是“ease”.
transition-delay 规定过渡效果何时开始，默认是0.
如果想要所有的属性都过渡，直接写一个all就可以
transition-duration 花费时间 单位是s 这个s单位必须写 ms 毫秒
运动曲线 默认是ease 何时开始 默认是0s立即开始
linear 匀速
ease 逐渐慢下来
ease-in 加速
ease-out 减速
例如：transition: width .3s ease 0s,height 0.3s ; 多组属性
transition:all 0.5s 一般只写前两个
过渡写到本身上 谁做过渡动画写到谁身上
10 京东过渡效果
记住给img标签加transition 不要给盒子加
11京东侧边栏
z-index改变层级
12 2d-移动
transform是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放
甚至支持矩阵的动画知识。可以取代大量之前只能靠Flash才可以实现的效果
变形转换transform transform 变换 变形的意思
移动translate(x,y)
translate 移动平移的意思
移动translate(50px,50px);
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
/* transition过渡 */
transition:all 0.4s;
}
div:hover{
transform:translate(100px,100px)
}
</style>
</head>
<body>
<div>
</div>
</body>
实际应用：可以让定位的盒子水平居中，垂直居中；
transform:translate(-50%,-50%);
transform:translateY(-50%);
transform:translateX(-50%);
translate 如果x -50% 跟父亲没关系，是走自己盒子宽度的一半
2d-缩放 scale(x,y);
transform:scale(0.8,1)
可以对元素进行水平和垂直方向的缩放，该语句使用scale方法使该元素在
水平方向上缩小了20%,垂直方向上不变。
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（x轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scale()的取值默认的值为1,当值设置为0.1到0.9之间的任何值，作用使一个元素缩小
而任何大于1的值都是使元素放大
旋转 rotate(deg);
transform:rotate(90deg);正的顺时针旋转 负的逆时针旋转
transform-origin可以调整元素转换变形的原点
倾斜 skew（deg,deg）
div{transform-origin:left top;transform:rotate(45deg);}
改变元素到原点左上角，然后顺时针旋转45deg;
如果是4个角，可以使用left top这些，如果想要精确的位置，可以用px像素
div{transform-origin: 10px 10px ;transform: rotate(45deg);}
改变元素原点到x,y为10,10然后顺时针旋转45deg;
transform属性可以连写
transform:skew(0,30deg); 按照水平方向Y轴，顺时针旋转。（相当于用上下的力拉盒子的左上角和右下角）按照垂直方向X轴，逆时针旋转（相当于用左右的力拉盒子的左上角和右下角）
transform-origin:left top;
3D变形（CSS3）transform
rotateX()
01 我的课程表
单行文本垂直居中 line-height = 行高
注意盒子的边线重合问题
02拔网站的小工具
仿站小工具 V3.0exe
一个超级好用的仿网站小工具
03精品推荐模块 精品产品模块 页面底部 都是对上面知识的综合应用
选择T工具然后单击文字就能选择文字
移动工具 自动选择改成图层
04动画原理 只有IE9或者以上兼容
animation动画（css3）
动画是css3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组
动画语法格式：
animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向
@keyframes 规定动画
animation 所有动画属性的简写属性，除了animation-play-state属性
animation-name规定@keyframes 动画的名称
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是0；
animation-timing-function 规定动画的速度曲线。默认是"ease"
animation-delay规定动画何时开始，默认是0
animation-iteration-count规定动画的播放次数 默认是1 工作中大多数用infinite表示无限次播放
animation-direction规定动画是否在下一周期逆向的播放。默认是"normal" "alternate"跑马灯轮流反向播放；
animation-play-state规定动画是否正在运行或者暂停。默认是“running”还有暂停"paused";
animation-fill-mode规定动画时间之外的状态
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意
调用动画（相当于函数的调用）
animation: move 3s ease 0s;
声明动画(关键帧）第一种声明方法
@keyframes move {
from {
left:0;
background-color:pink
}to{
left:1000px;
background-color:yellow
}
}
animation具体的用法可以查阅W3C手册属性太多了
动画的缩放效果(心跳效果）
声明动画
@keyframes heart {
0%{
transform:scale(1);
}
50%{
transform:scale(1.1);
}
100%{
transform:scale(1);
}
}
调用动画
animation: heart 0.5s infinite;每隔两秒心跳一次
动画的旋转
animation:rotate linear 2s infinite;
@keyframes rotate{
from{
transform:rotate(0deg);
}
}
to{
transform:rotate(360deg);
}
}
05flex伸缩布局（这个是重中之重）
css3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，
其中可以发挥极大的作用
主轴：flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来
一定的局限性，因为语法规范不一致，致使Flexbox布局使用不多
2、各属性详解
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min-width:280px 最小宽度不能小于280
max-width: 1280px 最大宽度 不能大于1280
2.flex-direction调整主轴方向（默认水平方向）
flex-direction:column垂直排列
flex-direction:row水平排列
http://m.ctrip.com/html5/携程网手机端地址
给父亲添加伸缩布局属性为 display:flex;
平均分三份儿 给儿子们加flex: 1;
<style type="text/css">
section{
width: 80%;
height: 150px;
margin: 100px auto;
display:flex;
min-width:500px;
flex-direction:column;/*列的伸缩布局*/
}
section div {
height: 100%;
flex: 1; /* 孩子的份数 */
}
section div:nth-child(1){
background-color:pink;
flex: 2; /* 偏袒孩子 */
}
section div:nth-child(2){
background-color:purple;
width:30px; /* 固定的宽剩下两个平均分配 */
}
section div:nth-child(3){
background-color:blue;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
手机移动端最小的屏幕 min-width: 320px 还有常用的 540 640 750 等手机屏幕和dpi有关，后面继续学习
em字体宽度单位 rem单位和js搭配使用实现响应式布局
后面还要学到一个display:table 表格模式布局
文字阴影
又是一个css3的属性
以后我们可以给我们的文字添加阴影效果了
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色
h-shadow 必须，水平阴影的位置。允许负值
v-shadow 必须，垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色。
前两项是必须写的，后两项可以选写
背景渐变
在线性渐变过程中，颜色沿着一条直线过渡，从左侧到右侧，从右侧到左侧，从顶部到底部，从底部到顶部
如果你曾经使用过制作图件，比如photoshop，你对线性渐变并不会陌生
这个东西兼容问题很严重，我们只说一说线性渐变（当做了解的知识）
语法格式：
background:-webkit-linear-gradient(渐变的起始位置，起始颜色， 结束颜色)
background:-webkit-linear-gradient(渐变的起始位置，颜色 位置， 颜色 位置)
background:-webkit-linear-gradient（left top,red,green）;
background:-webkit-linear-gradient (top,red 0%,green 50%,blue 100%);
背景缩放
ios在作图的时候要按照原来精灵图的两倍去做图，再进行背景缩放。不然的话ios的图片会出现失真现象
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动web开发中做屏幕，其参数
设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b）设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域
background-image:url("imgs/gyt.jpg");
background-size:300px 100px 针对父元素设置背景图像的宽度和高度，如果第一个值不设，第二个值则为auto
background-size:contain;把背景图片扩展至足够大，以使其背景图像完全覆盖背景区域
背景图像的某些部分也许无法显示在背景定位区域中。
background-size:cover;把背景图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域
优雅降级和渐进增强(根据用户的需求而定)
什么是渐进增强 、优雅降级呢？
渐进增强
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高版本浏览器进行效果、交互等的改进
类似爬山，由低处往高处爬
优雅降级
一开始就构建完整的功能，然后再针对低版本浏览器兼容
类似蹦极：由高处往低处落
区别：渐进增强是向上兼容，优雅降级是向下兼容
浏览器前缀名称
-webkit- Google Chrome,Safari,Andriod Browser
-moz- firefox
-o- Opera
-ms- internet Explorer,Edge
-khtml- konqueror 已淘汰
移动
translateX(x)
仅水平方向移动（x轴移动）
translateY(y)
仅垂直方向移动（Y轴移动）
translate3d(x,y,z)
其中 ，x和y可以是长度值，也可以是百分比，百分比时相对于其本身元素水平方向的宽度和垂直方向值
多背景
以逗号分隔可以设置多背景，可用于自适应布局 做法就是用逗号隔开就好了
一个元素可以设置多重背景图像
每组属性间使用逗号分隔
如果设置的多重背景图之间存在着交集（即存在着重叠关系，前面的背景图会覆盖后面的背景图）
background:url(test1.jpg) no-repeat scroll 10px 20px/70px 90px
background:rgba(255,0,0,.2)盒子的背景透明
apacity:0.2 盒子本身半透明
filter:alpha(opacity=20);
动画
声明动画
@keyframes move{
from{
left:0;
background-color:pink;
}
to{
left:1000px;
background-color:yellow;
}
3D变形
2d x y
3d x y z
左手坐标系
伸出左手，让拇指和食指呈“L”型，大拇指向右，食指向上，中指指向前方，这样我们就建立了一个左手
直角坐标系
食指和中指的指向正好和坐标轴的正反方向相反这就是屏幕上的3D坐标轴
rotateX()
就是沿着x立体旋转单位是deg
rotateY()
沿着y轴旋转
rotateZ()
沿着Z轴旋转
skew(deg,deg)属性
skew(x,y）属性x 的值是沿着图形的左上角和右下角进行左右拉拽
属性y 的值是沿着图形的左上角和右下角进行上下拉拽
透视（perspective）
电脑显示屏是一个2D平面，图像之所以有立体感（3D效果），其实只是一种视觉呈现，通过透视可以将
一个2D平面，在旋转的过程中，呈现3D效果
透视原理：近大远小
浏览器透视：把近大远小的所有图像，透视在屏幕上
perspective:视距，表示视点距离屏幕的长短，视点用于模拟透视效果时人眼的位置
注意：并非任何情况下需要透视效果，根据开发需要进行设置
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
backface-visibility
属性定义当元素不面向屏幕时是否可见
backface-visibility:hidden;
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
