移动端布局,C3新增属性

Posted 2020-09-26

《html5拖拽》
　　1、给元素设置 draggable="true" 属性，这个元素就可以被拖拽了

《拖拽元素事件》

2、ondragstart 拖拽前触发得得事件
例：div1.ondragstart=function(){ //拖拽前
　　　　div1.style.background="blue"；
　　}

3、ondrag 拖拽前到拖拽结束连续触发
例：div1.ondrag=function(){ //拖拽中
　　　　 div1.style.borderColor="blue";
　　}

3、ondragend 拖拽结束触发
例：div1.ondragend=function(){ //拖拽完后
　　　　div1.style.background="#fff";
　　}

《目标元素事件》

1、ondragenter 进入目标元素触发

2、ondragover 进入目标到离开目标之间，连续触发

3、ondragleave 离开目标元素触发

4、ondrop 在目标元素释放鼠标触发

《dataTransfer 对象》

1、解决火狐下的问题
火狐必须设置dataTransfer对象才可以拖拽除图片外的其他标签

2、setData()设置数据 getData()获取数据
　　e.dataTransfer.setData("id", e.target.id) 设置数据
　　e.dataTransfer.getData("id") 获取数据
【注】：在拖拽元素设置数据，在目标文件中获取数据
3、setDragImage 在拖拽中把元素暂时变成图片
　　e.dataTransfer.setDragImage(img,50,50)
　　三个参数：指定的元素，坐标X，坐标Y
4、files 获取外部的拖拽进入的文件，在目标元素中设置
　　例：e.dataTransfer.files；

《FileReader 读取文件信息》
　　1、readAsDataURL 参数为要读取的文件对象，将文件读取为DataURL
　　　　　例：var f=new FileReader()
　　　　   f.readAsDataURL(fils[i])

2.onload
当读取文件成功完成的时候触发此事件 this. result ,
来获取读取的文件数据，如果是图片，将返回base64格式的图片数据

《本地存储》
　　1、localStorage.name="xxx"; //第一种设置存储本地数据的方法

2、localStorage.setItem("set","xx"); //第二种设置存储本地数据的方法

3、localStorage.removeItem("name"); //删除本地存储数据

4、alert(localStorage.name) //获取本地数据
alert(localStorage.getItem("set")) //另一种获取本地数据的方法

5、alert(localStorage.key(0)) //获取前面保存数据的名称 括号中的数值和数组相同

6、localStorage.clear() //清除所有本地存储的数据

7、localStorage.setItem("set1","{‘name‘:‘小李‘,‘age‘:‘1314‘}") //保存为占瑟格式

8、zhi=localStorage.getItem("set1") // 获取保存的本地数据
zh=eval(‘(‘+zhi+‘)‘) //将占瑟格式转换为对象
alert(zh.age) //调用其中的值

《css3选择器》

　　1、属性选择器

1、p+a +号代表同一父元素指定元素后面紧跟着匹配的元素（只匹配后面的第一个）

2、p~a ~线代表在同一父元素下指定元素后面所有匹配的元素

3、a[href] 只匹配属性，也就是只匹配指定标签的拥有指定属性的标签。

4、a[href="a"] 匹配属性和属性值，只能匹配指定标签中必须和要[]中的属性和属性值完全相同的标签。

5、a[href~ ="a"] 这样带 ~ 匹配属性可以匹配比如class 中设有俩个值 这样的话带 ~ 就可以匹配其中一个
了。

6、a[href ^ ="a"] 匹配属性和属性值但属性值是以 " " 中的属性值开头的标签

7、a[href $ ="a"] 匹配属性和属性值但属性值是以 " " 中的属性值结尾的标签

8、a[href * ="a"] 匹配属性和属性值只要属性值中包含有" "中的值的标签就可以匹配到。

9、a[href | ="a"] 匹配属性和属性值这样可以匹配到属性值是"a-b"的标签，这样写可以免写 - ；

2、伪类选择器

1、:active 鼠标点击和释放发生的事件，也就是鼠标点击的时候后会发生，松开后又会还原。

2、:hover 鼠标移入发生改变或事件，当鼠标离开时回还原到移入前的状态。

3、:link 设置未访问的链接样式 ，当点击过后它将回到初始或被设置的状态。

4、:visited 设置链接被访问过后的样式。

3、结构性伪类选择器

1、:root 用来匹配文档的根元素;

2、div>:not(p) 对括号以内匹配不进行操作/匹配非指定元素;必须写什么元素下的什么元素不对它进行操作

3、:empty 匹配没有子元素没有文本连空格都没有的元素

4、:target 选取当前活动的目标元素；
也就是给要点击的标签设置href属性通过href属性就行锚点链接；对这个描点指向的标签进行操作

4、父元素下的子元素操作 【注】指定元素一定要写要匹配的元素不可以是它的父元素
1、:first-child 匹配父元素中第一个元素是指定标签的元素进行操作；
例：p:first-child 意思是匹配所有父元素下第一个子元素是p标签的元素。

2、:last-child 匹配父元素中最后元素是指定标签的元素进行操作；
例：p:last-child 意思是匹配所有父元素下最后一个子元素是p标签的元素。

3、:only-child 匹配父元素下只有一个指定的子元素；对匹配子元素操作
例：p:only-child 意思是匹配所有父元素只有一个p标签；这样操作的所匹配的指定元素

5、操作元素在父元素中指定元素与其匹配的元素位置相同的元素

1、:nth-child(1) 匹配属于其父元素的所有子元素的第几个子元素，与指定元素匹配的元素
在这里只要父元素下的子元素与括号数值想等的位置与指定元素不同就匹配不到
例：p:nth-child(1) 意思是匹配父元素中的第一个子元素是p标签的元素；对p标签进行操作

2、:nth-of-child() 匹配指定元素在父元素中第几次出现的元素进行操作，
也就是说指定标签的数量只要不比括号中的数值小就一定能匹配到
例：p:nth-of-child(1) 匹配父元素中的第一次出现的p标签

3、:nth-last-child() 与上方第（1）个相同 只是第一个是从前忘后匹配，
这个是从后往前匹配(1)括号中写1代表了最后一个；不像上面 1 就是代表第一个
例：p:nth-last-child(1) 意思是匹配父元素中的最后一个子元素是p标签的元素；对p标签进行操作

4、:nth-last-of-child() 与上方第二个相同 只是从最后一个找起
例：p:nth-last-of-child(1) 匹配父元素中从后往前的第一次出现的p标签

5、even 偶数 odd奇数 1n : 数字加n 代表是数字的倍数
这些填写在上面括号中更好对标签操作。

6、元素状态伪类选择器
　　1、:focus 选取input获取焦点的元素，失去焦点时会回到获取焦点前的状态

2、:enabled 选取可用的元素

3、:disabled 选取不可用的元素

4、:read-only 选取处于只读状态的元素

5、:read-write 选取可读可写的元素

6、:checked 匹配复选框或单选框为选中状态的元素

7、:default 页面打开时复选框或单选框处于默认选中的元素

8、::selection 当元素能容选中状态时

9、:indeterminate 页面打开时整组单选框没默认选中时整组单选框的样式

7、伪元素选择器
　　1、:first-line 选取指定选择器的首行

2、:first-letter 选去指定选择器的首字母或第一个字

 

《移动端头部布局》
　　1、刷新
　　<meta http-equiv="refresh" content="3">
　　| |
　　恢复，刷新 多长时间

2、文档类型
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

3、语言
<meta http-equiv="content-language" content="zh-cn">

4、页面描述
<meta name="description" content="测试">

5、关键词搜索：给浏览器搜索引擎使用；可以是提高优先搜索级
<meta name="keywords" charset="meta,meta属性,英雄">

6、优先使用ie最新浏览器eage 和谷歌1
<meta http-equiv="X-UA-Compatible" content="Ie=Edae,chome=1">

7、手机端宽 手机端高 是否缩放 缩放的初始大小 缩放的最大和最小
<meta name="viewport" content="width=device-width,height=device-height,
显示设备宽 显示设备高
user-scalable=no,initial-scale:0.5,maximum-scale=3,minimum-scale=1">
用户能否缩放 初始缩放倍数 最大缩放倍数 最小缩放倍数

 《标准盒子和怪异盒子》

1、盒子模型有两种1、标准模型 2、怪异盒子

2、标准盒子：他会把边框也算为占位宽；
怪异盒子：添加属性后好比宽为300 加 2像素的边框后 他的占位宽还是300 不会是304
还有内边距也一样；怪异盒子加边框加内边距不会改变盒子的初始设置的宽高

3、box=sizing
他有两个属性 box-sizing：content-box; 采用标准盒子计量
box-sizing：border-box; 采用怪异盒子计量
【注】属性写在要设置的元素中就好

 

《弹性盒子》

　　1、弹性盒子：是为了适应不同屏幕大小的设备确保元素拥有恰当的行为的布局方式
　　弹性盒子由弹性容器和弹性子元素构成

2、 display：flex； 和 inline：flex；
弹性容器通过设置元素属性为display：flex（块级元素布局）

3、flex-direction 主轴的排列方向
flex-direction:row; 主轴为水平方向，起点在左端，也就是弹性盒子的默认
flex-direction:row-reverse; 主轴为水平方向，起点在右端；也就是倒排列，最后一个排在第一个，倒二是
第二，依次排列
flex-direction:column; 主轴为垂直方向，起点是第一个子元素
flex-direction:column-reverse; 主轴为垂直方向，起点是最后一个子元素，也就倒序

4、flex-wrap 主轴线排列不下 的换行 不会挤在一块
flex-wrap:nowrap; （默认）不换行 不管放不放得下都不会换行
flex-wrap:wrap; 换行，第一行在上方
flex-wrap:wrap-reverse; 换行，第一行在最下方

5、flex-flow 主轴方向和换行一起的简写
默认 flex-flow:row nowrap

6、justify-content 弹性子元素在主轴上的对齐方式
justify-content:flex-start; 在主轴上左对齐
justify-content:flex-end; 在主轴上右对齐
justify-content:center; 在主轴上居中对齐
justify-content:space-between; 在主轴上两端对齐，元素之间的间隔相等
justify-content:space-around; 在主轴上两端对齐,两侧间隔相等，元素之间是元素与边框间隔的一倍

7、align-items 交叉轴对齐方式（也就是垂直对齐方式）
align-items:flex-start; 交叉轴的起点对齐
align-items:flex-end; 交叉轴的终点对齐
align-items:center; 交叉轴居中对齐
align-items:baseline; 项目的第一行文字的基线对齐
align-items:stretch; （默认）项目未设置高度或高度为auto，将占满整个容器的高度

8、align-content 用于修改flex-wrap换行后的属性行为
align-content:flex-start; 交叉轴的起点对齐
align-content:flex-end; 交叉轴的终点对齐
align-content:center; 交叉轴居中对齐
align-content:space-between; 交叉轴两端对齐；元素之间距离平均分布
align-content:space-round; 交叉轴也就是行与行之间间隔相等，元素之间是元素与边框间隔的一倍
align-content:stretch; (默认值) 轴线占满整个交叉轴。

9、flex 用于弹性子元素如何分配空间
flex-grow:2; 定义弹性盒子子元素的扩张比率
flex-shrink:1; 定义弹性盒子的收缩比率
flex-basis: 定义弹性盒子的默认基准值

 

来自平时总结,如有雷同纯属巧合。