新h5的用法
@media: 媒体查询关键字
max-width: 最大宽度
min-width: 最小宽度
传统布局:兼容性好，布局繁琐，局限性不能很好的在移动端进行布局
flex弹性布局:操作方便，布局简单，移动端应用广泛，在pc端浏览器支持情况较差
flex是flexible box的缩写，任何一个容器都可以指定为flex布局
容器:采用flex布局的元素，称为容器 父亲
项目:在flex布局中的子元素被称为项目 儿子
当父元素设置flex布局之后 子元素上的float clear和vertical-align失效
原理:通过给父元素添加一个flex属性，来控制子元素的位置和排列方式
父元素：
flex-direction 主轴方向 容器里边元素的排列方向
justify-content 主轴上子元素的排列方式
flex-wrap 设置子元素是否换行
align-items 设置侧轴上的子元素的排列方式(单行)
align-content 设置侧轴上的子元素排列方式(多行)
flex-flow 复合属性 相当于同时设置flex-direction和flex-wrap
子元素:
flex 子项目占得份数
align-self 设置子项本身在侧轴的排列方式
order 定义子项的排列顺序(前后)
flex-direction 子元素的排列方向
row 默认值 元素将水平显示，跟一个行一样
row-reverse 与row相同 但是以相反的顺序
column 元素将垂直显示，跟一个列一样
column-reverse 与column相同 但是以相反的顺序
justify-content 设置子元素在主轴上的对齐方式
flex-start 默认值 项目位于容器的开头 左对齐
flex-end 项目位于容器的结尾 右对齐
center 项目位于容器中间 居中
space-between 先两边贴边 再平分剩余空间
space-around 项目之间平分剩余空间(每个项目两侧都相等)
space-evenly 项目之间平分空间(项目和项目的间隔包括边缘的间隔都相等)
flex-wrap 换行
nowrap 默认值 不换行
wrap 项目会换行，在必要的时候换行
wrap-reverse 项目会换行，在必要的时候换行，但是换行后是反的
align-items 定义子元素在测轴上的对齐方式
stretch 默认值 拉伸 项目被拉伸以适应该容器 注意子盒子不要给高度
flex-start 项目位于容器的开头 在顶部 左对齐
flex-end 项目位于容器的结尾 右对齐
center 项目位于容器的中间 垂直居中
baseline 项目位于容器的基线上
新增添的属性:
新增添的标签:
进度条
拖拽:
原生js拖放事件
一、应用于被拖动的元素的事件
1.dragstart: 按下鼠标(没有松手)并进行移动。会在被拖动的元素身上触发该事件
2.drag: 在dragstart事件触发后，随即就会触发该事件，元素在拖动的过程中持续触发
3.dragend: 拖动结束(鼠标松开)的时候，就会触发该事件
二、应用于放置目标的事件
1.dragenter； 只要元素拖动到放置目标上，就会触发该事件
2.dragover: 触发dragenter事件后，随即就会触发该事件，只要在放置目标内活动，就会持续触发
3.dragleave: 拖动的元素拖出放置目标，就会触发该事件，同时dragover就不会触发了
4.drop: 拖动的元素放置到目标元素中，就会触发该事件
/onopen: 与服务器连接成功时触发
onmessage: 当接受到服务端的消息是触发
onerror: 当出现错误时触发
onclose: 当链接关闭时触发
localStorage 生命周期 永久除非主动删除 存货与整个浏览器会话中 窗口页面之间共享localstrage 内存大小5M 15M
浙公网安备 33010602011771号