咳咳咳，我就不说些没用的了，直接进入正题。下面是这几天的笔记，顺便勉励自己：总结后多练习，理解才是王道。嗯嗯，下面开始了疯狂的粘贴！↓↓↓↓↓↓↓↓↓↓↓
day01----2D转换==============================================================电脑 PC端页面布局（html+css）
移动端布局（html5+css3）
1.新增语义化标签：<hearder>头<nav>导航<article>内容<section>块<aside>侧边栏<footer>尾部（IE9需要转换为块级元素）
2.新增多媒体标签
<audio>音频标签：<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>
        1】controls 显示控件
        2】autoplay 自动播放（谷歌禁用）
        3】loop播放完毕后循环播放
        4】不同浏览器支持不同的音频格式，解决办法如下：
        <audio>
                <source src="sonw.mp3" type="audio/mpeg">
                <source src="sonw.ogg" type="audio/ogg">
                您的浏览器不支持audio播放
        </audio>
<video>视频播放：<video src="" controls="controls" autoplay="autoplay" loop="loop" poster =“media/pig.jpg”></video>
        1】controls 显示控件
        2】autoplay 自动播放（谷歌禁用，解决办法：添加禁音属性muted）
        3】loop播放完毕后循环播放
        4】poster 加载时显示的等待图片
        4】不同浏览器支持不同的视频格式，解决办法如下：
        <video>
                <source src="sonw.mp4" type="video/mp4">
                <source src="sonw.ogg" type="video/ogg">
                您的浏览器不支持video播放
        </video>
3.新增表单
新增输入类型type：数字number、手机号tel、搜索search等
新增表单属性：required不能为空、placeholder提示文本（占位符）、autofcous自动获取焦点等、autocomplete显示已填写选项（on、off，一般关闭，须有name值，须成功提交）、multiple（可多选，上传文件时）
4.css3新增属性选择器（disabled属性： 按钮不可点击）
        1】属性选择器，权重10
        2】标签名[属性名] {}；属性名-属性的名字【不是值】
        3】标签名[属性名=“值”]
        4】标签名[属性名^="开头"]
        5】标签名[属性名$="结尾"]
        6】标签名[属性名*="包含"]
5.css3结构伪类选择器（从父元素中选择子元素，父元素 与 ：之间必须加空格）
        1】E :first-child{};获取第一个标签
        2】E :last-child{};获取最后一个标签
        3】E :nth-child(n);获取第n个标签
                E :nth-child(even);偶数 2n
                E :nth-child(odd);奇数 2n+1
                n+5从第5个开始获取
                -n+5获取前5个
        4】E F:first-child {}; 选择E下面的F元素 与 E的第一个子元素的交集。
        5】E F:first-of-type{}; 选择E下面的第一个F元素。
        同理还有 last-of-type、nth-of-type。
6.伪元素选择器 (E::before {content="";})
        ::before在内容里面【前】插入
        ::after在内容里面【后】插入
        content属性不能省略
7.2D转换 transform
        translate 移动
                1】语法：合写-transform:translate(x,y);分写-translateX:(x);translateY(y);
                2】x，y的值可以是百分比，以盒子自身的宽高来移动
                3】translate对行内元素无效
                4】不影响其他元素的位置
day02----动画================================================================
【2D转换】
1、二维旋转 transform: rotate（45deg）
        1】deg度，正值时顺时针旋转，负值时逆时针旋转；
        2】默认旋转中心点为盒子中心点（相当于transform-origin：50% 50%；）
                1）设置旋转中心点：transform-origin：X Y；
                2）可跟方位名词：transform-origin：left bottom；
2、二维缩放 transform: scale（x，y）;
        1】X，Y为数字，不跟单位，2就是2倍；0.5就是缩小50%；
        2】X为宽，Y为高；等比缩放时，可只填写一个数值；
        3】特点：缩放不影响其他盒子，以默认中心点进行缩放，可设置中心点。
3、二维转换综合写法 transform: translate() rotate() scale();
        1】位移要放最前面，位移、旋转、缩放；
【动画】
1、制作动画的步骤
        1】定义动画 （关键词from等同于0%，to等同于100%）
                @keyframes 动画名 {
                        0% {

                        }
                        100% {

                        }               
                }
        2】调用动画
                animation-name: 动画名;
                animation-duration: 持续时间;
2、动画序列
        1】除0%与100%外，还可以添加多个状态（如25%，50%，75%等等）
3、动画常用属性
        1】@keyframes 规定动画
        2】animation  属性简写
        3】animation-name 调用动画 （必须）
        4】animation-duration 动画完成时间 （必须）
        5】animation-timing-function 运动曲线
        6】animation-delay 规定动画何时开始
        7】animation-iteration-count 完成次数，默认是1，还有infinite（无限）
        8】animation-direction 下一周期逆播放，默认是normal，可设置alternate（逆播放）
        9】animation-play-state 默认是running（运行），可设置；aused（暂停）
        10】animation-fill-mode 动画结束后forwards（保持原位置）backwards（回到起始位置）
4、动画属性简写 animation：名称 持续时间 运动曲线 延迟时间 播放次数 倒车 一去不返
animation：myfirst 5s linear 2s infinite alternate；
        【注意】
        1】简写中不包含animation-play-state
        2】animation-play-state：puased；经常与鼠标经过配合使用
        3】想要动画走回来，而不是直接跳回来：animation-direcion：alternate；
        4】动画结束后，停在结束位置：animation-fill-mode：forwards；
        5】opacity 透明度
5、速度曲线的步长属性animation-timing-function：steps（10）；
6、同一个元素加多个动画，用逗号“,”隔开；

day03----3D转换==============================================================
【3D转换】
1、三维坐标系
        1】X轴，水平方向，右正，左负；
        2】Y轴，垂直方向，下正，上负；
        3】Z轴，垂直屏幕，外正，内负；
2、3D位移
        1】X,Y,Z可分写，如：transform: translateX(100px)；
        2】第二种写法：transform: translateX(100px) translateY(100px) translateZ(100px)；
        3】简写：transform: translate3d(x,y,z);
                【注意】其中d为小写，并且xyz不能省略，没有就写0
3、透视perspective
        1】写到被观察元素的父级元素上（不一定是父亲）
        perspective: 1000px; 1000px为视距，近大远小;
        2】值的单位为px；
        3】有透视才能开启3D空间
4、3D旋转 rotate3d
        1】语法：
                transform:rotateX(45deg);
                transform:rotateY(45deg);
                transform:rotateZ(45deg);
                transform:rotate3d(x,y,z,deg);--了解
                        如：transform:rotate3d(1,1,0,180deg);对角旋转
        2】左手准则，大拇指指向该轴的正方向，其余手指弯曲的方向为旋转正方向；
5、3D呈现 transform-style
        1】子元素默认不开启3D立体空间，
                transform-style:flat;默认；
                transform-style:preserve-3d; 开启3D立体环境；
        2】该属性加给父盒子；
6、浏览器私有前缀
        1】-moz-                火狐
        2】-ms-                IE
        3】-webkit-        safari、chrome
        4】-o-                Opera
        提倡写法：
        -webkit-border-radius: 30px 10px;
        -moz-border-radius: 30px 10px;
        -ms-border-radius: 30px 10px;
          // border-radius 一定要放在最后
        border-radius: 30px 10px;

day04----流式布局=============================================================
1、视口（了解）
        1】布局视口
        2】视觉视口
        3】理想视口
2、视口标签（理解含义）
        <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
3、物理像素：分辨率
        1】物理像素比
4、二倍图
        1】制作图片时制作倍图，显示的时候缩小显示
        2】背景图缩放
        background-size: width height;
                1）只写宽度，等比缩放；可写百分比-相对父盒子
                2）cover 等比缩放，完全覆盖（可能有部分显示不全）
                3）contain 等比缩放，宽/高铺满盒子将不再拉伸（可能有部分空白区域）
5、技术选型
        1】单独制作移动端
        2】做响应式页面
6、移动端技术解决方案
        1】移动端初始化CSS（normalize.css）
        2】兼容性问题 -webkit-
        3】清除手机浏览器默认特殊样式
------------------------------------------------------------------------------------------------
        /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
            * {-webkit-tap-highlight-color: transparent;}
            /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
            input {-webkit-appearance: none;}
            /*禁用长按页面时的弹出菜单*/
            img,a { -webkit-touch-callout: none; }
------------------------------------------------------------------------------------------------
        4】使用CSS3盒模型
7、CSS3盒模型（box-sizing: border-box;）
        1】内边距，边框不影响盒子大小。
        2】PC端一般用传统盒模型（box-sizing: content-box;） 移动端用CSS3盒模型；
8、布局方式
        1】流式布局（百分比布局）
        2】flex布局
        3】rem布局
        4】bootstarp布局
9、流式布局
        1】布局盒子的宽度设置为百分比；
        2】设置最大与最小值，保护内容
                ①宽度最大/最小值max-width/min-width；
                ②高度最大/最小值max-height/min-height；
10、二倍精灵图
        1】在fireworks 里把图缩小一半；
        2】在代码里设置背景图片并把背景图片缩小一半；

day05----flex布局=============================================================
1、flex布局原理 display: flex;
        通过给父盒子（容器）添加flex属性，来控制子盒子（项目）的位置和排列方式
2、父项常见属性
        1】flex-direction: 设置主轴的方向（排列方向）
                ①flex-direction: row 默认X轴方向为主轴(行），row-reverse翻转（了解）
                ②flex-direction: column 设置Y轴方向为主轴（列），column-reverse翻转（了解）
        2】justify-content: 设置子元素排列方式（对齐：左对齐，右对齐，居中对齐，均匀分布，两边贴边再中间均匀分布）
                ① flex-start；默认，左对齐 ②flex-end; 右对齐；③center居中对齐；④space-around平均分配；⑤space-between两边对齐后，平均分配；
        3】flex-wrap:设置子元素是否换行
                ①nowrap默认不换行②wrap; 换行
        4】align-items:设置【单行】子元素侧轴对齐方式
                ①flex-start②flex-end③center④stretch（拉伸）
        5】align-content:设置【多行】子元素侧轴对齐方式
                ①flex-start②flex-end③center④space-around⑤space-between⑥stretch（高度平分父元素高度）
        6】简写flex-flow: 主轴方向 是否换行;
                如：flex-flow: column wrap;
3、子项常见属性（子项大小）
        1】flex: 份数；
                分配【剩余空间】的份数，如：flex：1；总份数为所有元素flex值之和，如果没有设置flex，默认是0；
        2】align-self: 控制自己在侧轴上的排列对齐方式；
                ①flex-start②flex-end③center
        3】order：数值；
                默认是0，可设负值，越小越靠前
4、弹性盒子布局步骤：
        1】给父盒子添加display: flex;
        2】确定主轴方向（排列方向）flex-direction:row/column;
        3】确定子元素对齐方式
                ①主轴方向对齐justify-content
                ②侧轴方向对齐align-items（单行）align-content（多行）
        4】确定子元素的大小flex:数值;（加给子元素本身，份数为所有兄弟子元素flex值的总和）

------------拓展------------
①文字阴影：text-shadow;
②背景渐变：background: -webkit-linear-gradient(方位名词，颜色1，颜色2);
------------区分------------
①子元素排列方向和对齐方式
②是给父元素添加样式，还是给子元素添加样式

咳咳咳，我就不说些没用的了，直接进入正题。下面是这几天的笔记，顺便勉励自己：总结后多练习，理解才是王道。嗯嗯，下面开始了疯狂的粘贴！↓↓↓↓↓↓↓↓↓↓↓
day01----2D转换==============================================================电脑 PC端页面布局（html+css）
移动端布局（html5+css3）
1.新增语义化标签：<hearder>头<nav>导航<article>内容<section>块<aside>侧边栏<footer>尾部（IE9需要转换为块级元素）
2.新增多媒体标签
<audio>音频标签：<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>
        1】controls 显示控件
        2】autoplay 自动播放（谷歌禁用）
        3】loop播放完毕后循环播放
        4】不同浏览器支持不同的音频格式，解决办法如下：
        <audio>
                <source src="sonw.mp3" type="audio/mpeg">
                <source src="sonw.ogg" type="audio/ogg">
                您的浏览器不支持audio播放
        </audio>
<video>视频播放：<video src="" controls="controls" autoplay="autoplay" loop="loop" poster =“media/pig.jpg”></video>
        1】controls 显示控件
        2】autoplay 自动播放（谷歌禁用，解决办法：添加禁音属性muted）
        3】loop播放完毕后循环播放
        4】poster 加载时显示的等待图片
        4】不同浏览器支持不同的视频格式，解决办法如下：
        <video>
                <source src="sonw.mp4" type="video/mp4">
                <source src="sonw.ogg" type="video/ogg">
                您的浏览器不支持video播放
        </video>
3.新增表单
新增输入类型type：数字number、手机号tel、搜索search等
新增表单属性：required不能为空、placeholder提示文本（占位符）、autofcous自动获取焦点等、autocomplete显示已填写选项（on、off，一般关闭，须有name值，须成功提交）、multiple（可多选，上传文件时）
4.css3新增属性选择器（disabled属性： 按钮不可点击）
        1】属性选择器，权重10
        2】标签名[属性名] {}；属性名-属性的名字【不是值】
        3】标签名[属性名=“值”]
        4】标签名[属性名^="开头"]
        5】标签名[属性名$="结尾"]
        6】标签名[属性名*="包含"]
5.css3结构伪类选择器（从父元素中选择子元素，父元素 与 ：之间必须加空格）
        1】E :first-child{};获取第一个标签
        2】E :last-child{};获取最后一个标签
        3】E :nth-child(n);获取第n个标签
                E :nth-child(even);偶数 2n
                E :nth-child(odd);奇数 2n+1
                n+5从第5个开始获取
                -n+5获取前5个
        4】E F:first-child {}; 选择E下面的F元素 与 E的第一个子元素的交集。
        5】E F:first-of-type{}; 选择E下面的第一个F元素。
        同理还有 last-of-type、nth-of-type。
6.伪元素选择器 (E::before {content="";})
        ::before在内容里面【前】插入
        ::after在内容里面【后】插入
        content属性不能省略
7.2D转换 transform
        translate 移动
                1】语法：合写-transform:translate(x,y);分写-translateX:(x);translateY(y);
                2】x，y的值可以是百分比，以盒子自身的宽高来移动
                3】translate对行内元素无效
                4】不影响其他元素的位置
day02----动画================================================================
【2D转换】
1、二维旋转 transform: rotate（45deg）
        1】deg度，正值时顺时针旋转，负值时逆时针旋转；
        2】默认旋转中心点为盒子中心点（相当于transform-origin：50% 50%；）
                1）设置旋转中心点：transform-origin：X Y；
                2）可跟方位名词：transform-origin：left bottom；
2、二维缩放 transform: scale（x，y）;
        1】X，Y为数字，不跟单位，2就是2倍；0.5就是缩小50%；
        2】X为宽，Y为高；等比缩放时，可只填写一个数值；
        3】特点：缩放不影响其他盒子，以默认中心点进行缩放，可设置中心点。
3、二维转换综合写法 transform: translate() rotate() scale();
        1】位移要放最前面，位移、旋转、缩放；
【动画】
1、制作动画的步骤
        1】定义动画 （关键词from等同于0%，to等同于100%）
                @keyframes 动画名 {
                        0% {

                        }
                        100% {

                        }               
                }
        2】调用动画
                animation-name: 动画名;
                animation-duration: 持续时间;
2、动画序列
        1】除0%与100%外，还可以添加多个状态（如25%，50%，75%等等）
3、动画常用属性
        1】@keyframes 规定动画
        2】animation  属性简写
        3】animation-name 调用动画 （必须）
        4】animation-duration 动画完成时间 （必须）
        5】animation-timing-function 运动曲线
        6】animation-delay 规定动画何时开始
        7】animation-iteration-count 完成次数，默认是1，还有infinite（无限）
        8】animation-direction 下一周期逆播放，默认是normal，可设置alternate（逆播放）
        9】animation-play-state 默认是running（运行），可设置；aused（暂停）
        10】animation-fill-mode 动画结束后forwards（保持原位置）backwards（回到起始位置）
4、动画属性简写 animation：名称 持续时间 运动曲线 延迟时间 播放次数 倒车 一去不返
animation：myfirst 5s linear 2s infinite alternate；
        【注意】
        1】简写中不包含animation-play-state
        2】animation-play-state：puased；经常与鼠标经过配合使用
        3】想要动画走回来，而不是直接跳回来：animation-direcion：alternate；
        4】动画结束后，停在结束位置：animation-fill-mode：forwards；
        5】opacity 透明度
5、速度曲线的步长属性animation-timing-function：steps（10）；
6、同一个元素加多个动画，用逗号“,”隔开；

day03----3D转换==============================================================
【3D转换】
1、三维坐标系
        1】X轴，水平方向，右正，左负；
        2】Y轴，垂直方向，下正，上负；
        3】Z轴，垂直屏幕，外正，内负；
2、3D位移
        1】X,Y,Z可分写，如：transform: translateX(100px)；
        2】第二种写法：transform: translateX(100px) translateY(100px) translateZ(100px)；
        3】简写：transform: translate3d(x,y,z);
                【注意】其中d为小写，并且xyz不能省略，没有就写0
3、透视perspective
        1】写到被观察元素的父级元素上（不一定是父亲）
        perspective: 1000px; 1000px为视距，近大远小;
        2】值的单位为px；
        3】有透视才能开启3D空间
4、3D旋转 rotate3d
        1】语法：
                transform:rotateX(45deg);
                transform:rotateY(45deg);
                transform:rotateZ(45deg);
                transform:rotate3d(x,y,z,deg);--了解
                        如：transform:rotate3d(1,1,0,180deg);对角旋转
        2】左手准则，大拇指指向该轴的正方向，其余手指弯曲的方向为旋转正方向；
5、3D呈现 transform-style
        1】子元素默认不开启3D立体空间，
                transform-style:flat;默认；
                transform-style:preserve-3d; 开启3D立体环境；
        2】该属性加给父盒子；
6、浏览器私有前缀
        1】-moz-                火狐
        2】-ms-                IE
        3】-webkit-        safari、chrome
        4】-o-                Opera
        提倡写法：
        -webkit-border-radius: 30px 10px;
        -moz-border-radius: 30px 10px;
        -ms-border-radius: 30px 10px;
          // border-radius 一定要放在最后
        border-radius: 30px 10px;

day04----流式布局=============================================================
1、视口（了解）
        1】布局视口
        2】视觉视口
        3】理想视口
2、视口标签（理解含义）
        <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
3、物理像素：分辨率
        1】物理像素比
4、二倍图
        1】制作图片时制作倍图，显示的时候缩小显示
        2】背景图缩放
        background-size: width height;
                1）只写宽度，等比缩放；可写百分比-相对父盒子
                2）cover 等比缩放，完全覆盖（可能有部分显示不全）
                3）contain 等比缩放，宽/高铺满盒子将不再拉伸（可能有部分空白区域）
5、技术选型
        1】单独制作移动端
        2】做响应式页面
6、移动端技术解决方案
        1】移动端初始化CSS（normalize.css）
        2】兼容性问题 -webkit-
        3】清除手机浏览器默认特殊样式
------------------------------------------------------------------------------------------------
        /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
            * {-webkit-tap-highlight-color: transparent;}
            /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
            input {-webkit-appearance: none;}
            /*禁用长按页面时的弹出菜单*/
            img,a { -webkit-touch-callout: none; }
------------------------------------------------------------------------------------------------
        4】使用CSS3盒模型
7、CSS3盒模型（box-sizing: border-box;）
        1】内边距，边框不影响盒子大小。
        2】PC端一般用传统盒模型（box-sizing: content-box;） 移动端用CSS3盒模型；
8、布局方式
        1】流式布局（百分比布局）
        2】flex布局
        3】rem布局
        4】bootstarp布局
9、流式布局
        1】布局盒子的宽度设置为百分比；
        2】设置最大与最小值，保护内容
                ①宽度最大/最小值max-width/min-width；
                ②高度最大/最小值max-height/min-height；
10、二倍精灵图
        1】在fireworks 里把图缩小一半；
        2】在代码里设置背景图片并把背景图片缩小一半；

day05----flex布局=============================================================
1、flex布局原理 display: flex;
        通过给父盒子（容器）添加flex属性，来控制子盒子（项目）的位置和排列方式
2、父项常见属性
        1】flex-direction: 设置主轴的方向（排列方向）
                ①flex-direction: row 默认X轴方向为主轴(行），row-reverse翻转（了解）
                ②flex-direction: column 设置Y轴方向为主轴（列），column-reverse翻转（了解）
        2】justify-content: 设置子元素排列方式（对齐：左对齐，右对齐，居中对齐，均匀分布，两边贴边再中间均匀分布）
                ① flex-start；默认，左对齐 ②flex-end; 右对齐；③center居中对齐；④space-around平均分配；⑤space-between两边对齐后，平均分配；
        3】flex-wrap:设置子元素是否换行
                ①nowrap默认不换行②wrap; 换行
        4】align-items:设置【单行】子元素侧轴对齐方式
                ①flex-start②flex-end③center④stretch（拉伸）
        5】align-content:设置【多行】子元素侧轴对齐方式
                ①flex-start②flex-end③center④space-around⑤space-between⑥stretch（高度平分父元素高度）
        6】简写flex-flow: 主轴方向 是否换行;
                如：flex-flow: column wrap;
3、子项常见属性（子项大小）
        1】flex: 份数；
                分配【剩余空间】的份数，如：flex：1；总份数为所有元素flex值之和，如果没有设置flex，默认是0；
        2】align-self: 控制自己在侧轴上的排列对齐方式；
                ①flex-start②flex-end③center
        3】order：数值；
                默认是0，可设负值，越小越靠前
4、弹性盒子布局步骤：
        1】给父盒子添加display: flex;
        2】确定主轴方向（排列方向）flex-direction:row/column;
        3】确定子元素对齐方式
                ①主轴方向对齐justify-content
                ②侧轴方向对齐align-items（单行）align-content（多行）
        4】确定子元素的大小flex:数值;（加给子元素本身，份数为所有兄弟子元素flex值的总和）

------------拓展------------
①文字阴影：text-shadow;
②背景渐变：background: -webkit-linear-gradient(方位名词，颜色1，颜色2);
------------区分------------
①子元素排列方向和对齐方式
②是给父元素添加样式，还是给子元素添加样式