前端html5/css3笔记

1、background-size：contain  /  cover
   contain:
      a。图片大于盒子：图片会等比例缩放（将图片缩小），盒子会有空白
      b.图片小于盒子：图片会等比例缩放（将图片放大），盒子会有空白
   cover:
      a。图片大于盒子：图片会等比例缩放,导致图片部分看不见
      a。图片小于盒子：图片会等比例缩放,导致图片部分看不见
2、过渡     动画做完后会回到初始状态
    transition:属性名 动画时间  动画的延迟时间 动画的速度  
3、display &&  opacity
    display 不能做动画   值只有现实和不显示
    opacity 能做动画     0-1
 4、过渡兼容性处理：
    transition:all 2s steps(4);
        -moz-transition: all 2s steps(4);
            -webkit-transition: all 2s steps(4);
                -o-transition: all 2s steps(4);
 transition:属性名 动画时间  动画的延迟时间 动画的速度  steps(4) == 注释：steps()和动画速度不能共存
 5、transform属性
 position:absolute ;left:0px       相对于父元素或者往上找直到找到body
 transform:translate(20px)         相对于自身的偏移   默认是X
 transform:scaleX(2)               如果大于1：放大，如果小于1：缩小
 transform:rotate(45deg)           角度大于0 顺时针旋转，角度小于0 顺时针旋转
 transform:skew(30deg) 斜切 ||  扭曲 
6、如何让一个盒子居中显示：position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)
2d
     tranform:translate(X,Y)|| translateX(20px) 
     tranform:scale(0.5)
     tranform:rotate(45deg)   
     transform:skew(30deg)
     transfor-origin:left  top ||  30px  40px
     transition:属性名 动画时间  动画延迟时间  动画速度  (steps())
3d
    tranform:translate3d(X,Y,Z)
    tranform:scale3d(1,2,3)
    tranform:rotate3d(1,2,3,45deg)
    开启3d效果：transform-style: preserve-3d;  
    透视：perspective:200px
 tranform:rotateX(45deg) 

    <div class="content mm-editor"><span class=" text-color-yellow">新的标签 audio + video</span></div>
    
    <div class="note mm-editor"><span>
    audio+video
    1、audio+video     controls+autoplay+loop   (由于谷歌浏览器对autoplay属性不支持，所以导致初次进入不能自动播放添加属性muted即可)
    2、video  (一般值设置一个值width||height)
    3、source标签
2、querySelector("</span><span class="tag">#aa</span><span>")  ||  querySelectorAll()
    querySelector("li")
    querySelectorAll("li")   伪数组
    jquery:                    dom：
    $(obj).addClass()          obj.classList.add()    
    $(obj).removeClass()       obj.classList.remove()
    $(obj).hasClass()          obj.classList.contains()
    $(obj).toggleClass()       obj.classList.toggle()
    dom:   obj.className=""          会对元素原先所有的类名进行覆盖
    html5: obj.classList.add()       会在原先的基础上进行追加
3、回顾
	dom:      obj.setAttribute()     obj.getAttribute()  
	jquery:   
	    $(obj).attr("class")
	    $(obj).prop()      属性值不能改变checked+disabled+selected
4、dataset 获取属性
	html5:
	    obj.dataset["aaBb"]
	jquery:
	    $("li").attr("data-aa-bb")
	    $("li").data("aaBb")
5、fullscreen
    1、js的兼容性处理   加前缀
        google+apple+360+qq       内核：webkit
        火狐                      内核：moz
        欧朋                      内核：o
        ie                        内核：ms
    2、实现全屏和退出全屏对象不一样
        实现全屏：具体对象调用     RequestFullScreen()方法
        退出全屏：document对象调用 CancelFullScreen()方法
    3、火狐最标准的
6、fileReader
	对象：万物皆对象  
	对象是研究什么：三要素======属性+方法+回调函数
	图片的即时预览：new FileReader()
	1、input表单绑定oncahnge事件，触发获取文件读取对象   var  reader=new  FileReader()
	2、获取选中的文件    input的files     数组类型     
	    var file=document.querySelector("</span><span class="tag">#myFile</span><span>").files;
	3、调用对象的方法  读取文件      reader.readAsDataURL(file[0])
	4、什么时候读取完毕： reader.οnlοad=function(){
	        5、读取后会把图片存放在对象属性中   reader.result     ======转码base64
	        6、显示图片   img.src=reader.result
	}

    <div class="note mm-editor"><span>
    1、drag
    1、实现拖拽的前提条件是什么？    draggable="true"
    2、被拖拽元素事件  +  目标元素事件
    被拖拽元素事件：
        ondragstart   开始拖拽
        ondrag        持续拖拽
        ondragleave   鼠标离开被拖拽元素
        ondragend     鼠标松开拖拽结束
    目标元素事件:
        ondragenter   进入目标元素事件
        ondrop        (结束：阻止浏览器默认行为)  结束拖拽
        ondragleave   离开目标元素
        ondragover    (持续拖拽)  持续拖拽
	任意元素拖拽：只需要触发三个事件即可  ondragstart + ondragover + ondrop
	e.dataTransfer.setData  || e.dataTransfer.getData
	ondragstart    存储数据：存储的是被拖拽元素的id     e.dataTransfer.setData
	ondrop         获取刚才存储的id  e.dataTransfer.getData=====通过id找到这个元素然后进行添加
2、sessionStorage  &amp;&amp;   localStorage
    sessionStorage:
        1、存储大小：5M
        2、生命周期
            a.同一个浏览器不同的窗口数据不能共享
            b.不同浏览器数据不能共享
            c.关闭浏览器数据不存在(关闭当前页面数据也是不存在)
            d.数据是存储在当前页面的
            e.存储的类型为字符串
        3、方法的使用
            window.sessionStorage.setItem("key","value")
            window.sessionStorage.getItem("key")
            window.sessionStorage.removeItem("key")
    localStorage
        1、存储大小：20M
        2、生命周期
            1、关闭窗口数据还存在，不同窗口数据可以共享
            2、数据是存储在硬盘上，如果想删除必须认为删除
			JSON.stringify(arr2)   =========将数组转换成字符串  原理就是在数组身上打上一个引号
			JSON.parse(arr3)  ==============将字符串转换成数组对象    原理是把引号去掉
	3、audio||video  提供属性+方法+事件都是原生的  只能使用dom操作
	    步骤分析：
	    1、点击播放按钮
	    2、全屏
    3、oncanplay  视频可以播放就执行 
        a.video.style.display=block
        b、获取视频的总时长 : video.duration
        c、通过获取的总时长计算出：时分秒
        d、将时分秒渲染在页面上
    4、ontimeupdate    视频在播放或者视频播放时间在改变
        a.获取当前视频的播放时间：video.currentTime
        b.通过获取的视频的播放时间计算出：时分秒
        c.将时分秒渲染在页面上
        d.计算播放进度的宽度=video.currentTime/video.duration *100+ "%"
    5、跳播
        1、获取当前点击处的偏移值    需要使用事件源参数
        2、计算百分比=当前点击处的偏移值/当前盒子(.bar)的总宽度
        3、计算当前视屏播放时间(video.currentTime)=百分比*视屏总时长
    6、onended    视屏一播放完毕就触发
        1、播放变成暂停
        2、设置当前播放时间为 0   video.currentTime=0;