第一天：
电脑  pc端页面布局（html+css）

移动端页面布局（html5 + css3 ）
        手机
        ipad


html5：
   1）新增的语义化标签
        (1)header  头部标签
                        <header><header/>
        (2)nav 导航标签
                        <nav><nav/>
        (3)article 内容标签
                        <article><article/>
        (4)section 块级标签
                        <section><section/>
        (5)aside侧边栏标签
                        <aside><aside/>
        (6)footer 尾部标签
                        <footer><footer/>
  2）音频标签
       1）语法：        <audio src="音频路径" controls="controls"></audio>
        <audio controls="controls">
         <source src="media/snow.mp3" type="audio/mpeg" />
         <source src="media/snow.ogg" type="audio/ogg" />
         </audio>
       2）属性：
          (1)autoplay="autoplay"
                如果出现该属性，则音频在就绪后马上播放。
          (2)controls="controls"
                如果出现该属性，则向用户显示控件，比如播放按钮。
          (3)loop="loop"
                如果出现该属性，则每当音频结束时重新开始播放。
          (4)preload="preload"
                如果出现该属性，则音频在页面加载时进行加载，并预备播放。   如果使用 "autoplay"，则忽略该属性。
          (5)src="路径"
                要播放的音频的 URL。
       3）浏览器兼容性处理：
             注：不同浏览器支持的格式不同，解决浏览器兼容问题
             注：谷歌浏览器必须加静音属性，才能实现自动播放
       4）游戏官网、宣传页面，加背景音乐
  3）视频标签
       1）语法：
          (1) <video src="音频路径" controls="controls"></video>
          (2) <video muted="muted" loop="loop" poster="media/pig.jpg" controls>
                                <source src="media/video.mp4" type="video/mp4" />
                                <source src="media/video.ogg" type="video/ogg" />       
               </video>
        2）属性:
          (1)autoplay=“autoplay”
                视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
          (2)controls=“controls”
                向用户显示播放控件
          (3)loop=“loop”
                播放完是否继续播放该视频，循环播放
          (4)muted=“muted”
                静音播放
          (5)preload=“auto”（预先加载视频）
                preload=“none”（不预先加载视频）
                规定是否预加载视频(如果有了autoplay   就忽略该属性）
          (6)poster="文件路径"
                加载等待的画面图片
        3）浏览器兼容性处理:
                注：不同浏览器支持的格式不同，解决浏览器兼容问题
                注：谷歌浏览器必须加静音属性，才能实现自动播放
  4）新增的input表单标签
        语法：<input type="输入类型">        输入类型：
                （1）type="email"
                        限制用户输入必须为Email类型
                （2）type="url"
                        限制用户输入必须为URL类型
                （3）type="date"
                        限制用户输入必须为日期类型
                （4）type="time"
                        限制用户输入必须为时间类型
                （5）type="month"
                        限制用户输入必须为月类型
                （6）type="week"
                        限制用户输入必须为周类型
                （7）type="number"
                        限制用户输入必须为数字类型
                （8）type="tel"
                        手机号码
                （9）type="search"
                        搜索框
                （10）type="color"
                        生成一个颜色选择表单
  5）新增的表单属性

                （1）required=“required”
                        表单拥有该属性表示其内容不能为空，必填
                （2）placeholder="提示文字"
                        表单的提示信息，存在默认值将不显示
                （3）autofocus=“autofocus”
                        输入光标自动聚焦到指定输入框
                （4）autocomplete=”on “ （默认）打开
                         autocomplete =”off”  关闭
                        当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中曾经已填写的选项
                （5）disabled="disibled"

                        使按钮不能点击

                （6）multiple="multiple"
                      可以多选文件提交
css3：
  1）属性选择器
        根据属性名
        根据属性值
        语法：（1）div[att]   选择具有att属性的div元素
                  （2）div[class="val"]   选择具有class属性且属性值等于val的div元素
                  （3）div[class^="val"]  匹配具有class属性，且属性值为val开头div元素
                  （4）div[class$=''val'']   匹配具有class属性，且属性值为val结尾div元素
                  （5）div[class*=''val'']  匹配具有class属性，且属性值中含有val结尾div元素
  2）结构伪类选择器
        语法：
                    (1) ul li:first-child
                         选择ul里第一个li
                    (2)ul li:last-child
                         选择ul里最后一个li
                    (3)ul li:nth-child(6)
                         选择ul里第6个li
                       ul li:nth-child(even)
                         选择ul里偶数的li标签
                       ul li:nth-child(odd)
                         选择ul里奇数的li标签
                       ul li:nth-child(2n)
                         选择ul里2*n的li标签，也可以（3n）（4n）....   n从0开始计算，2n相当于选择偶数
                       ul li:nth-child(n+5)
                         选择ul里从第5个开始后的所有li，包含第五个
                       ul li:nth-child(-n+5)
                         选择ul里第5个li前的所有li，包含第五个
                         注：:nth-child(n) 选择父元素里的第n个孩子，不管是否是同一种类型
                   (4)div span：first-of-type
                        选择div里第一个span
                   (5)div span：last-of-type
                        选择div里最后一个span
                   (6)div span：nth-of-type（2）
                        选择div里第2个span，也可以（3）（4）......
  3）伪元素选择器
        语法：
                  （1）div::before {content:"内容"}                        在div里的内容前添加一个内容
                  （2）div::after {content:"内容"}
                        在div里的内容后添加一个内容
                        注：1.必须有content属性，但可以为空内容
                               2.before和after会创建一个行内元素，可以通过display转为行内块

2D转换（变换）transform（移动，旋转，缩放）
           （移动）语法：
                  （1）transform：translate（x,y）
                        连写
                  （2）transform：translateX(100px)
                        向x轴移动100px，X为大写
                  （3）transform：translateY(100px)
                        向y轴移动100px，Y为大写
              注：1.X,Y为大写
                     2.translate类似定位，不会影响到其他元素的位置
                     3.transform：translateX(50%)，表示向x轴移动自身宽度的一半
                     4.对行内标签没有效果
              让盒子垂直居中，水平居中
                   （1）transform：translate（-50%,-50%）
              注：同样要使用子绝父相
          （旋转）语法：
                       （1）transform:rotate(度数deg);        顺时针
                       （2）transform:rotate(-度数deg);       逆时针
                        注：通常和过渡一起使用
                       模拟三角：
                        1.使用伪元素添加一个正方形盒子，给正方形只设置两个边框
                        2.定位到指定位置
                        3.旋转45度
         转换中心点 transform-origin
                语法：（1）transform-origin：left  top；等
                注：1.可以是方位名词
                           （2）transform-origin：x  y；例：transform-origin：50px  50px；
                注：2.可以是像素值
                           （3）transform-origin：0;  只写一个值的时候  第二个值默认为 50%;
        2d缩放 scale
                语法：转换的属性值为 scale(宽的倍数,高的倍数) ;
                          （1）transform-scale（2，2）;或transform-scale（2）;
                注：修改了宽高为原来的2倍
                          （2）transform-scale（.5，.5）;或transform-scale（.5）;
                注：缩小了1倍
        2D旋转综合写法
                语法：transform：translate（）rotate(度数deg)  scale（.5，.5）；
                注：1.顺序.位移，旋转，缩放
                       2.顺序不能变更，有位移及其他属性时，位移必须最前面

动画
        语法： /* 我们想页面一打开，一个盒子就从左边走到右边 */
                        /* 1. 定义动画 */        
                        @keyframes 名称 {
                            /* 开始状态 */
                                    0% {
                                        transform: translateX(0px);
                                    }
                            /* 结束状态 */
                                    100% {
                                transform: translateX(1000px);
                                    }
                        }
                 div {
                                    width: 200px;
                                    height: 200px;
                                    background-color: pink;
                                    /* 2. 调用（使用）动画 */
                                    /* 动画名称 */
                                    animation-name: 名称;
                                    /* 持续时间 */
                                    animation-duration: 2s;
                        }
                注：必须属性：动画名称，动画执行时间
     常用属性：
       1. 动画名
              设置要使用的动画名 animation-name:xxx;       
       2. 持续时间
             设置动画播放的持续时间  animation-duration:3s；
       3. 速度曲线
             和设置过渡的速度曲线一样 animation-timing-function:linear;
                          linear： 匀速
                          ease： 慢-快-慢   （逐渐慢下来）  默认值
                          ease-in： 慢-快。（加速）
                          ease-out： 快-慢。（减速）
                          ease-in-out： 慢-快-慢。（先加速后减速）
                          steps(2)  设置分几步完成动画效果
        4. 延迟时间
              animation-delay: 0s; 默认是0       
        5. 循环次数
             设置动画播放的循环次数  animation-iteration-count: 2;
                         infinite 为无限循环
        6. 循环方向
             animation-direction：normal；  
                        1. normal  默认值 ，正向运行
                        2. reverse 反向运行
                        3. alternate  正-反-正... （倒车）
                        4. alternate-reverse  反-正-反..   
                        5. 以上与循环次数有关
        7. 动画结束状态：
                         animation-fill-mode 设置动画在等待或者结束的时候的状态
                         forwards：动画结束后，元素样式停留在 100% 的样式
                         backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式（默认）
                         both： 同时设置了 forwards和backwards两个属性值
                        注：有了无限播放就不要结束状态
       8. 暂停和播放
                        animation-play-state  控制 播放 还是 暂停
                        running 播放   
                        paused 暂停
                        注：一般鼠标悬停（hover）时使用此属性
        动画简写
                语法：animation：动画名称  持续时间  运动曲线  何时开始  播放次数  是否反方向  动画起始或结束的状态；
                animation: name   duration   timing-function   delay   iteration-count   direction   fill-mode;
                注：1.前两个属性必须写,暂停动画不在简写里
                      2.给同一个盒子加两个动画，中间用逗号隔开animation: name   duration，name   duration；

3D transform:translate3d
        语法：
        移动：1. transform:translate3d(x,y,z)  其中 x y z 分别指要移动的轴的方向的距离（简写）
                  2. translform:translateX(100px)  仅仅是移动在x轴上移动
                  3. translform:translateY(100px)  仅仅是移动在Y轴上移动
                  4. translform:translateZ(100px)  仅仅是移动在Z轴上移动  (一般用px为单位）
                  注：1.xyz不能省略，没有的用0表示
                         2.z轴是垂直屏幕的方向，到眼睛的方向是正值
        旋转：1. transform:rotateX(45deg); 沿着x轴正方向旋转 45度
                  2. transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
                  3. transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
                  4. transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度  了解即可
                注：1.x轴旋转时正值为往后倒，负值往前倒。（耍单杠）
                       2.y轴旋转时正值为往右转，负值往左转。（钢管舞）
                       3.z轴旋转时正值为往右转，负值往左转。（抽奖转盘）
        透视 perspertive：100px；
                注：1.给需要呈现3d效果的父盒子添加这个值
                       2.使用3d时必须设置这个值
        3d呈现  transform-style
                transform-style: flat;  平面模式，不开启3维立体环境
                transform-style: preserve-3d;  3维立体环境
                注： 代码写给父级，但是影响的是子盒子

过渡transition
        语法：1.transition-duration   定义过渡效果花费的时间。默认是 0。
                  2.transition-property   规定应用过渡的 CSS 属性的名称。
                  3.transition-timing-function   规定过渡效果的时间曲线。默认是 "ease"。
                  4.transition-delay    规定过渡效果何时开始。默认是 0。
                   简写：transition: 要过渡的属性  花费时间  运动曲线  何时开始;  
                   例：transition: all （全部属性） 1s（运动完成所需时间）  linear（匀速）  1s（延迟1秒运动）;
                   常用：transition: all 1s；
                    属性值：运动曲线：    linear： 匀速
                          ease： 慢-快-慢   （逐渐慢下来）  默认值
                          ease-in： 慢-快。（加速）
                          ease-out： 快-慢。（减速）
                          ease-in-out： 慢-快-慢。（先加速后减速）

旋转木马案例
        注：1.先放6张图片在同一位置，每张图片沿y轴转60度，依次度数变大60度，并沿z轴前移300px。
css3兼容处理
        - 谷歌 -webkit
        - 火狐 -moz
        - IE -ms
        -欧朋-o-
        注:如对 border-radius 进行兼容性处理   
        -webkit-border-radius: 30px 10px;
        -moz-border-radius: 30px 10px;
        -ms-border-radius: 30px 10px;
         border-radius 一定要放在最后
         border-radius: 30px 10px;
         如果发现添加前缀也解决不了兼容性问题，那么就不要使用该css3属性

理想视口  ideal viewport
        语法：<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
         属性：
       1.背景缩放background-size
        语法： background-size: 图片的宽度 图片的高度;
             注：1.background-size: 500px; 只写一个参数 肯定是宽度 高度省略了  会等比例缩放
                    2.background-size: 50%;  里面的单位可以跟%  相对于父盒子来说的
                         3. background-size: cover;   cover 等比例拉伸 要完全覆盖div盒子  可能有部分背景图片显示不全
                    4. background-size: contain;  高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域

CSS3盒子模型box-sizin
        语法：box-sizing: border-box;   
          注：1.移动端使用，加到盒子的css中去
                 2.好处：padding和border不会撑大盒子

移动端特殊样式
         /*CSS3盒子模型*/
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
            -webkit-tap-highlight-color: transparent;
            /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
            -webkit-appearance: none;
            /*禁用长按页面时的弹出菜单*/
            img,a { -webkit-touch-callout: none; }

移动端常见布局
        1. 流式布局（百分比布局）
            语法：width：100%；    100%代表为浏览器显示的宽度
            注：max-width   最大宽度 （max-height  最大高度）  
                   min-width    最小宽度 （min-height  最小高度）
                设置浏览器拉伸时最大和最小的显示宽度和高度，也就是让他不能无限放大或缩小

        2. flex 弹性布局（强烈推荐）
           less+rem+媒体查询布局
           混合布局

第一天：
电脑  pc端页面布局（html+css）

移动端页面布局（html5 + css3 ）
        手机
        ipad


html5：
   1）新增的语义化标签
        (1)header  头部标签
                        <header><header/>
        (2)nav 导航标签
                        <nav><nav/>
        (3)article 内容标签
                        <article><article/>
        (4)section 块级标签
                        <section><section/>
        (5)aside侧边栏标签
                        <aside><aside/>
        (6)footer 尾部标签
                        <footer><footer/>
  2）音频标签
       1）语法：        <audio src="音频路径" controls="controls"></audio>
        <audio controls="controls">
         <source src="media/snow.mp3" type="audio/mpeg" />
         <source src="media/snow.ogg" type="audio/ogg" />
         </audio>
       2）属性：
          (1)autoplay="autoplay"
                如果出现该属性，则音频在就绪后马上播放。
          (2)controls="controls"
                如果出现该属性，则向用户显示控件，比如播放按钮。
          (3)loop="loop"
                如果出现该属性，则每当音频结束时重新开始播放。
          (4)preload="preload"
                如果出现该属性，则音频在页面加载时进行加载，并预备播放。   如果使用 "autoplay"，则忽略该属性。
          (5)src="路径"
                要播放的音频的 URL。
       3）浏览器兼容性处理：
             注：不同浏览器支持的格式不同，解决浏览器兼容问题
             注：谷歌浏览器必须加静音属性，才能实现自动播放
       4）游戏官网、宣传页面，加背景音乐
  3）视频标签
       1）语法：
          (1) <video src="音频路径" controls="controls"></video>
          (2) <video muted="muted" loop="loop" poster="media/pig.jpg" controls>
                                <source src="media/video.mp4" type="video/mp4" />
                                <source src="media/video.ogg" type="video/ogg" />       
               </video>
        2）属性:
          (1)autoplay=“autoplay”
                视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
          (2)controls=“controls”
                向用户显示播放控件
          (3)loop=“loop”
                播放完是否继续播放该视频，循环播放
          (4)muted=“muted”
                静音播放
          (5)preload=“auto”（预先加载视频）
                preload=“none”（不预先加载视频）
                规定是否预加载视频(如果有了autoplay   就忽略该属性）
          (6)poster="文件路径"
                加载等待的画面图片
        3）浏览器兼容性处理:
                注：不同浏览器支持的格式不同，解决浏览器兼容问题
                注：谷歌浏览器必须加静音属性，才能实现自动播放
  4）新增的input表单标签
        语法：<input type="输入类型">        输入类型：
                （1）type="email"
                        限制用户输入必须为Email类型
                （2）type="url"
                        限制用户输入必须为URL类型
                （3）type="date"
                        限制用户输入必须为日期类型
                （4）type="time"
                        限制用户输入必须为时间类型
                （5）type="month"
                        限制用户输入必须为月类型
                （6）type="week"
                        限制用户输入必须为周类型
                （7）type="number"
                        限制用户输入必须为数字类型
                （8）type="tel"
                        手机号码
                （9）type="search"
                        搜索框
                （10）type="color"
                        生成一个颜色选择表单
  5）新增的表单属性

                （1）required=“required”
                        表单拥有该属性表示其内容不能为空，必填
                （2）placeholder="提示文字"
                        表单的提示信息，存在默认值将不显示
                （3）autofocus=“autofocus”
                        输入光标自动聚焦到指定输入框
                （4）autocomplete=”on “ （默认）打开
                         autocomplete =”off”  关闭
                        当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中曾经已填写的选项
                （5）disabled="disibled"

                        使按钮不能点击

                （6）multiple="multiple"
                      可以多选文件提交
css3：
  1）属性选择器
        根据属性名
        根据属性值
        语法：（1）div[att]   选择具有att属性的div元素
                  （2）div[class="val"]   选择具有class属性且属性值等于val的div元素
                  （3）div[class^="val"]  匹配具有class属性，且属性值为val开头div元素
                  （4）div[class$=''val'']   匹配具有class属性，且属性值为val结尾div元素
                  （5）div[class*=''val'']  匹配具有class属性，且属性值中含有val结尾div元素
  2）结构伪类选择器
        语法：
                    (1) ul li:first-child
                         选择ul里第一个li
                    (2)ul li:last-child
                         选择ul里最后一个li
                    (3)ul li:nth-child(6)
                         选择ul里第6个li
                       ul li:nth-child(even)
                         选择ul里偶数的li标签
                       ul li:nth-child(odd)
                         选择ul里奇数的li标签
                       ul li:nth-child(2n)
                         选择ul里2*n的li标签，也可以（3n）（4n）....   n从0开始计算，2n相当于选择偶数
                       ul li:nth-child(n+5)
                         选择ul里从第5个开始后的所有li，包含第五个
                       ul li:nth-child(-n+5)
                         选择ul里第5个li前的所有li，包含第五个
                         注：:nth-child(n) 选择父元素里的第n个孩子，不管是否是同一种类型
                   (4)div span：first-of-type
                        选择div里第一个span
                   (5)div span：last-of-type
                        选择div里最后一个span
                   (6)div span：nth-of-type（2）
                        选择div里第2个span，也可以（3）（4）......
  3）伪元素选择器
        语法：
                  （1）div::before {content:"内容"}                        在div里的内容前添加一个内容
                  （2）div::after {content:"内容"}
                        在div里的内容后添加一个内容
                        注：1.必须有content属性，但可以为空内容
                               2.before和after会创建一个行内元素，可以通过display转为行内块

2D转换（变换）transform（移动，旋转，缩放）
           （移动）语法：
                  （1）transform：translate（x,y）
                        连写
                  （2）transform：translateX(100px)
                        向x轴移动100px，X为大写
                  （3）transform：translateY(100px)
                        向y轴移动100px，Y为大写
              注：1.X,Y为大写
                     2.translate类似定位，不会影响到其他元素的位置
                     3.transform：translateX(50%)，表示向x轴移动自身宽度的一半
                     4.对行内标签没有效果
              让盒子垂直居中，水平居中
                   （1）transform：translate（-50%,-50%）
              注：同样要使用子绝父相
          （旋转）语法：
                       （1）transform:rotate(度数deg);        顺时针
                       （2）transform:rotate(-度数deg);       逆时针
                        注：通常和过渡一起使用
                       模拟三角：
                        1.使用伪元素添加一个正方形盒子，给正方形只设置两个边框
                        2.定位到指定位置
                        3.旋转45度
         转换中心点 transform-origin
                语法：（1）transform-origin：left  top；等
                注：1.可以是方位名词
                           （2）transform-origin：x  y；例：transform-origin：50px  50px；
                注：2.可以是像素值
                           （3）transform-origin：0;  只写一个值的时候  第二个值默认为 50%;
        2d缩放 scale
                语法：转换的属性值为 scale(宽的倍数,高的倍数) ;
                          （1）transform-scale（2，2）;或transform-scale（2）;
                注：修改了宽高为原来的2倍
                          （2）transform-scale（.5，.5）;或transform-scale（.5）;
                注：缩小了1倍
        2D旋转综合写法
                语法：transform：translate（）rotate(度数deg)  scale（.5，.5）；
                注：1.顺序.位移，旋转，缩放
                       2.顺序不能变更，有位移及其他属性时，位移必须最前面

动画
        语法： /* 我们想页面一打开，一个盒子就从左边走到右边 */
                        /* 1. 定义动画 */        
                        @keyframes 名称 {
                            /* 开始状态 */
                                    0% {
                                        transform: translateX(0px);
                                    }
                            /* 结束状态 */
                                    100% {
                                transform: translateX(1000px);
                                    }
                        }
                 div {
                                    width: 200px;
                                    height: 200px;
                                    background-color: pink;
                                    /* 2. 调用（使用）动画 */
                                    /* 动画名称 */
                                    animation-name: 名称;
                                    /* 持续时间 */
                                    animation-duration: 2s;
                        }
                注：必须属性：动画名称，动画执行时间
     常用属性：
       1. 动画名
              设置要使用的动画名 animation-name:xxx;       
       2. 持续时间
             设置动画播放的持续时间  animation-duration:3s；
       3. 速度曲线
             和设置过渡的速度曲线一样 animation-timing-function:linear;
                          linear： 匀速
                          ease： 慢-快-慢   （逐渐慢下来）  默认值
                          ease-in： 慢-快。（加速）
                          ease-out： 快-慢。（减速）
                          ease-in-out： 慢-快-慢。（先加速后减速）
                          steps(2)  设置分几步完成动画效果
        4. 延迟时间
              animation-delay: 0s; 默认是0       
        5. 循环次数
             设置动画播放的循环次数  animation-iteration-count: 2;
                         infinite 为无限循环
        6. 循环方向
             animation-direction：normal；  
                        1. normal  默认值 ，正向运行
                        2. reverse 反向运行
                        3. alternate  正-反-正... （倒车）
                        4. alternate-reverse  反-正-反..   
                        5. 以上与循环次数有关
        7. 动画结束状态：
                         animation-fill-mode 设置动画在等待或者结束的时候的状态
                         forwards：动画结束后，元素样式停留在 100% 的样式
                         backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式（默认）
                         both： 同时设置了 forwards和backwards两个属性值
                        注：有了无限播放就不要结束状态
       8. 暂停和播放
                        animation-play-state  控制 播放 还是 暂停
                        running 播放   
                        paused 暂停
                        注：一般鼠标悬停（hover）时使用此属性
        动画简写
                语法：animation：动画名称  持续时间  运动曲线  何时开始  播放次数  是否反方向  动画起始或结束的状态；
                animation: name   duration   timing-function   delay   iteration-count   direction   fill-mode;
                注：1.前两个属性必须写,暂停动画不在简写里
                      2.给同一个盒子加两个动画，中间用逗号隔开animation: name   duration，name   duration；

3D transform:translate3d
        语法：
        移动：1. transform:translate3d(x,y,z)  其中 x y z 分别指要移动的轴的方向的距离（简写）
                  2. translform:translateX(100px)  仅仅是移动在x轴上移动
                  3. translform:translateY(100px)  仅仅是移动在Y轴上移动
                  4. translform:translateZ(100px)  仅仅是移动在Z轴上移动  (一般用px为单位）
                  注：1.xyz不能省略，没有的用0表示
                         2.z轴是垂直屏幕的方向，到眼睛的方向是正值
        旋转：1. transform:rotateX(45deg); 沿着x轴正方向旋转 45度
                  2. transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
                  3. transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
                  4. transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度  了解即可
                注：1.x轴旋转时正值为往后倒，负值往前倒。（耍单杠）
                       2.y轴旋转时正值为往右转，负值往左转。（钢管舞）
                       3.z轴旋转时正值为往右转，负值往左转。（抽奖转盘）
        透视 perspertive：100px；
                注：1.给需要呈现3d效果的父盒子添加这个值
                       2.使用3d时必须设置这个值
        3d呈现  transform-style
                transform-style: flat;  平面模式，不开启3维立体环境
                transform-style: preserve-3d;  3维立体环境
                注： 代码写给父级，但是影响的是子盒子

过渡transition
        语法：1.transition-duration   定义过渡效果花费的时间。默认是 0。
                  2.transition-property   规定应用过渡的 CSS 属性的名称。
                  3.transition-timing-function   规定过渡效果的时间曲线。默认是 "ease"。
                  4.transition-delay    规定过渡效果何时开始。默认是 0。
                   简写：transition: 要过渡的属性  花费时间  运动曲线  何时开始;  
                   例：transition: all （全部属性） 1s（运动完成所需时间）  linear（匀速）  1s（延迟1秒运动）;
                   常用：transition: all 1s；
                    属性值：运动曲线：    linear： 匀速
                          ease： 慢-快-慢   （逐渐慢下来）  默认值
                          ease-in： 慢-快。（加速）
                          ease-out： 快-慢。（减速）
                          ease-in-out： 慢-快-慢。（先加速后减速）

旋转木马案例
        注：1.先放6张图片在同一位置，每张图片沿y轴转60度，依次度数变大60度，并沿z轴前移300px。
css3兼容处理
        - 谷歌 -webkit
        - 火狐 -moz
        - IE -ms
        -欧朋-o-
        注:如对 border-radius 进行兼容性处理   
        -webkit-border-radius: 30px 10px;
        -moz-border-radius: 30px 10px;
        -ms-border-radius: 30px 10px;
         border-radius 一定要放在最后
         border-radius: 30px 10px;
         如果发现添加前缀也解决不了兼容性问题，那么就不要使用该css3属性

理想视口  ideal viewport
        语法：<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
         属性：
       1.背景缩放background-size
        语法： background-size: 图片的宽度 图片的高度;
             注：1.background-size: 500px; 只写一个参数 肯定是宽度 高度省略了  会等比例缩放
                    2.background-size: 50%;  里面的单位可以跟%  相对于父盒子来说的
                         3. background-size: cover;   cover 等比例拉伸 要完全覆盖div盒子  可能有部分背景图片显示不全
                    4. background-size: contain;  高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域

CSS3盒子模型box-sizin
        语法：box-sizing: border-box;   
          注：1.移动端使用，加到盒子的css中去
                 2.好处：padding和border不会撑大盒子

移动端特殊样式
         /*CSS3盒子模型*/
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
            -webkit-tap-highlight-color: transparent;
            /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
            -webkit-appearance: none;
            /*禁用长按页面时的弹出菜单*/
            img,a { -webkit-touch-callout: none; }

移动端常见布局
        1. 流式布局（百分比布局）
            语法：width：100%；    100%代表为浏览器显示的宽度
            注：max-width   最大宽度 （max-height  最大高度）  
                   min-width    最小宽度 （min-height  最小高度）
                设置浏览器拉伸时最大和最小的显示宽度和高度，也就是让他不能无限放大或缩小

        2. flex 弹性布局（强烈推荐）
           less+rem+媒体查询布局
           混合布局