|
优酷，土豆，爱奇艺，腾讯、乐视等等
HTML5通过标签来解决音频播放的问题。
使用相当简单，如下图所示
并且可以通过附加属性可以更友好控制音频的播放，如：
controls 是否显不默认播放控件
loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环
由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考
多浏览器支持的方案，如下图
标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择
HTML5通过标签来解决音频播放的问题。
同音频播放一样，使用也相当简单，如下图
同样，通过附加属性可以更友好的控制视频的播放
controls 是否显示默认播放控件
width 设置播放窗口宽度
height 设置播放窗口的高度
由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考
多浏览器支持的方案，如下图****
结构(位置)伪类选择器（CSS3)
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
选取标签带有某些特殊属性的选择器 我们成为属性选择器
伪元素选择器（CSS3)
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
“:” 与 “::” 区别在于区分伪类和伪元素
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查
伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
transition: 要过渡的属性 花费时间 运动曲线 何时开始; 如果有多组属性变化，还是用逗号隔开。
|
|
简写属性，用于在一个属性中设置四个过渡属性。
|
|
规定应用过渡的 CSS 属性的名称。
|
|
定义过渡效果花费的时间。默认是 0。
|
|
规定过渡效果的时间曲线。默认是 “ease”。
|
|
规定过渡效果何时开始。默认是 0。
|
如果想要所有的属性都变化过渡， 写一个all 就可以
运动曲线 默认是 ease
何时开始 默认是 0s 立马开始
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置，x、y可为负值；
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） scaleX(x)元素仅水平方向缩放（X轴缩放） scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大
可以对元素进行旋转，正值为顺时针，负值为逆时针；
注意单位是 deg 度数
如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。
该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图
CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图
x左边是负的，右边是正的
y 上面是负的， 下面是正的
z 里面是负的， 外面是正的
就是沿着 x 立体旋转.
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
仅水平方向移动**（X轴移动）
仅垂直方向移动（Y轴移动）
transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。
[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多
2、各属性详解****
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
子盒子如何在父盒子里面水平对齐
|
|
默认值。项目位于容器的开头。
|
让子元素从父容器的开头开始排序但是盒子顺序不变
|
|
让子元素从父容器的后面开始排序但是盒子顺序不变
|
|
让子元素在父容器中间显示
|
|
项目位于各行之间留有空白的容器内。
|
左右的盒子贴近父盒子，中间的平均分布空白间距
|
|
项目位于各行之前、之间、之后都留有空白的容器内。
|
相当于给每个盒子添加了左右margin外边距
|
4、align-items调整侧轴对齐（垂直对齐）
子盒子如何在父盒子里面垂直对齐（单行）
|
|
默认值。项目被拉伸以适应容器。
|
让子元素的高度拉伸适用父容器（子元素不给高度的前提下)
|
|
|
垂直对齐开始位置 上对齐
|
|
垂直对齐结束位置 底对齐
|
|
当我们子盒子内容宽度多于父盒子的时候如何处理
|
|
默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩（压缩） 显示 强制一行内显示
|
|
规定灵活的项目在必要的时候拆行或拆列。
|
|
规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
|
|
|
必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。
|
|
默认值。项目被拉伸以适应容器。
|
|
|
|
|
项目位于各行之间留有空白的容器内。
|
|
项目位于各行之前、之间、之后都留有空白的容器内。
|
8、order控制子项目的排列顺序，正序方式排序，从小到大
用css 来控制盒子的前后顺序。 用order 就可以
用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0
此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值
以后我们可以给我们的文字添加阴影效果了 Shadow 影子
- 前两项是必须写的。 后两项可以选写。
直译为"块级格式化上下文"。
我们前面讲过 元素的显示模式 display。
分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。
那些元素会具有BFC的条件
不是所有的元素模式都能产生BFC，w3c 规范：
大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。
注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。
这个BFC 有着具体的布局特性：
就好比，你有了练习武术的体格了。 有潜力，有资质。
什么情况下可以让元素产生BFC
以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？
在好比，你光有资质还不行，你需要一定额外效果才能出发的武学潜力，要么你掉到悬崖下面，捡到了一本九阴真经，要么你学习葵花宝典，欲练此功必先…
BFC元素所具有的特性
1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
- BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
- 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
白话文： 孩子在家里愿意怎么折腾都行，但是出了家门口，你就的乖乖的，不能影响外面的任何人。
(1) 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。
计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。
(3) 制作右侧自适应的盒子问题
普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
类似 爬山，由低出往高处爬
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
类似蹦极，由高处往低处下落
区别：渐进增强是向上兼容，优雅降级是向下兼容。
个人建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。
后面我们会有 常用的解决H5和C3 的兼容解决文件， 我们这里暂且不涉及。
在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。
兼容性问题很严重，我们这里之讲解线性渐变
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。
- 一个元素可以设置多重背景图像。
- 每组属性间使用逗号分隔。
- 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
- 为了避免背景色将图像盖住，背景色通常都定义在最后一组上，
|
