CSS属性书写顺序
1.布局定位属性：display，position，float，clear，overflow
2.自身属性：width，height，margin，padding，border，background
3.文本属性：color，font，text，wvertical-align
4.其他属性（css3）：rcontent，cursor，bovcxzdcdfdfc9**rder-radius，box-shadow，text-shadow，background：linear-gradient
5.宽和高蓝色 | padding绿色 | margin为橙色
6.定位的堆叠顺序z-index:默认0值越大盒子越靠上
水平居中用浮动；垂直居中用定位；
no-repeat
7.鼠标样式：小手cursor:pointer;
8.以后不写具体的高：高由内容+padding撑开
9.透明的用png24 不透明的用jpeg
10.<小于号 <
>大于号>
11.等差数列:An=a1+(n-1)*d
12.过渡：transiton:all 0.5s;
13.两个盒子嵌套，子元素有margin-top的话记得给父级盒子overflow：hidden
---------
14.超出一行以省略号来显示：
强制一行显示 white-space:nowrap;
溢出隐藏 overflow:hidden;
超出省略号显示 text-overflow:ellippsis;
15.虚线 dashed 实线solid
16.导航栏时，如果每个li的内容文字不一样多 则不给宽度，用padding值挤开
---------------------------2D
17.Transform:translate(x,y); 2D之移动 可以单独定义transform:translateX(5px);
18.transform:rotate(度数deg) 2D之旋转
19.transform-origin:x,y; 2D旋转之转换中心点，默认(50% 50%) 等价于(center center)
20.transform:scale(x,y); 2D之缩放
21.图片转换为block 则可以设置margin:auto;居中
------------------------3D
22.3D移动 transform:translate3d(x,y,z);
23.透视perspective:px;
24.3D旋转rotate3d: transform:rotateZ(45deg);
25.3D呈现transform-style:preserve 子元素开启立体空间，代码写给父级，但是影响的是子盒子
26.指定元素背面面向用户是否可见backface-visibility: hidden;
27.opacity透明度 1显示 0不显示
28.Box-sizing:border-box; 加上这句话就可以变成css3盒子模型
29.让图片和文字居中对齐 vertical-align:midden;
30.去除图片底部的空袭 vertical-align:top/midden;
31.线性渐变色background: -webkit-linear- gradient(left, #FF506C, #FF6BC6);
32.大盒子套小盒子，如果两个盒子都是行内块元素，则两个盒子之间会有底缝隙，解决办法是：将其中一个盒子改为块元素即可。例：大盒子为a，小盒子是img
33.一个大盒子套着几个小盒子 如果小盒子设置浮动float了，则不会撑开大盒子，需要给大盒子清除浮动，overflow:hidden;
34.functoin：先把变量的声明和函数的声明提到最前面 再调用（var num=1， 将var num提到最前面 num=1还在原位置）（如果函数调用，将该函数的声明提到调用的上面）
35.构造函数：
构造函数的声明
function Star(uname){
this.name = uname;
this.sing = function(song){(←song是形参)
console.log(song);(←将形参输出)
} }
构造函数的调用
属性调用：var ldh = new Star(‘刘德华‘);0
方法调用：ldh.sing(‘冰雨’);
36文本.inner.HTML可以识别html标签
获取的时候使用innerText；
赋值的时候使用innerHTML
37.js修改css样式 函数里面写：
行内样式：this.style.fontSize = ‘25px‘;权重比较高
类名样式:this.className.fontSize = ‘‘;
38.获取类名
var btn = document.querySelector(‘.close-btn‘);
39.边框线重复时：margin-top:-1px;
40.自定义属性
自定义属性html格式:以data-开头
js中 element.setAttribute(‘date-index‘.‘2‘);前面是属性名后面是值‘
41.获取父节点-属性：离自己最近的父节点 .parentNade
获取子节点：
全部的子节点：.childNades
全部的子元素节点: .children
-----------------
获取第一个子元素节点：ul.children[0]：
获取最后一个子元素节点：ul.children.[node.length-1]
--------------------↓ 下面这个有兼容性问题 ie9↑
获取第一个子元素节点：firstElementChild
获取最后一个个子元素节点：lastElementChild
--------------------------
42.获取兄弟节点- ie9以上支持
获取下一个兄弟元素节点： .nextElementSibling
获取上一个兄弟元素节点： .previousElementSibling
同时添加多个元素 append(a,b);
·······························································································
43.自定义属性
定义自定义属性：
lis[i].setAttribute(‘data-index‘,i);
获取自定义属性：
1.var index = this.getAttribute(‘data-index‘);
2.lis[i].dataset.index / lis[i].dataset[‘index‘]
3.删除自定义属性 removeAttribute(‘data-index‘);
·····························································································
44.同一个元素注册添加多个事件：ie9以上btn[0].addEventListener(‘click‘,function(){
})
·····························································································
45.删除事件/解绑事件：
1.传统注册事件删除：
divs[0].onclick = null ;
2.注册多个事件的解绑方法：
divs[0].addEventListener(‘click‘,fn);先单独注册事件
dunction fn() {
alert(22)
divs[0].removeEventListener(‘click‘,fn); } 再调用一次后删除
·····························································································
46.事件捕获和事件冒泡
var son =document.querySelector(‘.son‘);
son.addEventListener(‘click‘,function(){
alert(‘son‘)},ture)
var father =document.querySelector(‘.father‘);
father.addEventListener(‘click‘,function(){
alert(‘son‘)},ture)
为ture时，处于捕获阶段 从外到里
document -> html -> body -> father -> son
为false时，处于冒泡阶段 从里到外
son -> father -> body -> html ->document
·····························································································
47删除冒泡：
e.stopPropagation();
阻止默认(捕获):
preventDefault();
·····························································································
48.键盘事件对象--
keyCode属性--返回ASC II码
keyup 键盘弹起时触发，不区分大小写，能识别所有的键
keydown 键盘按下时，一直触发不区分大小写，能识别所有的键
keypress 区分大小写，不能识别功能键
输出时 keyCode
·····························································································
49.
clientX clientY 可视窗口的位置
pageX pageY document对象的位置 ie9以上支持
·····························································································
50.this指向问题
事件里 this指向调用事件的x对象
构造函数里 this指向 构造函数里new出来的那个对象
全局变量下 指向window
·····························································································
51.按钮禁用 btn.disabled: ture/false
·····························································································
52.盒子到页面上 和左的距离 .offsetTop .offsetLeft
鼠标在页面中的坐标 e.pageX e.page.Y
鼠标在盒子中的位置=鼠标在页面中的位置 - 盒子到页面 上 和左的距离
·····························································································
53.元素被卷去的头部：element.scrollTop
页面被卷去的头部：window.pageYOffset
·····························································································
54.mouseenter和mouseover的区别
mouseenter只会经过自身盒子触发（没有冒泡效果）
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发
·····························································································
55.鼠标到到最中间的方法： 让盒子往上走自身高度的50% 往左走自身宽度的50% 就可以了
·····························································································
56.立即执行函数
(function( ) { } ( ) );
(function( ) { } ) ( );
·····························································································
57.步长（每次移动的距离）
（目标值 - 现在的位置）/ 10
·····························································································
58.移动端事件
touchsart touchmove touchend
e.targetTouches 触摸屏幕时的手指个数，是伪数组，一般都是一根手指，所以获取一个手指的移动距离是 e.targetTouches[0].pageX
·····························································································
59. .preventBefault(); 移动端阻止默认行为
·····························································································
60. classList属性 ie10以上（移动web用）
给元素添加类名，是追加类名，不是覆盖
元素名.classList.add(‘类名’);
给元素删除类名
元素名.classList.remove(‘类名‘);
给元素切换类名：比如可点一下使用，点一下隐藏
元素名.classList.toggle(‘ 类名‘);
·····························································································
61.监听过渡transition是否结束的属性：
transitionend
·····························································································
62.前端三大框架：vue react angular(已经被淘汰)
·····························································································
63.jQuery得到当前元素索引号：$(this).index()
·····························································································
64.创建自定义属性 setAttribute
获取自定义属性 getAttribute
·····························································································
65.本地存储：只能存字符串，存储在浏览器内
window.sessionStorage 5M 生命周期为关闭浏览器窗口，以键值对的形式存储
window.localStorage 20M 生命周期永久存在，手动才可以清除 多窗口共享数据
·····························································································
66.将数组对象转换为字符串对象：
JSON.stringify()
将字符数据转换为对象格式：
JSON.parse()
·····························································································
67.字符串添加到父元素里
insertAdjacentHTML(放在什么位置.添加的字符串)
双击事件：ondblclick();
·····························································································
65.> 大于< 小于
·····························································································
66.解决同源限制
1. JSONP（服务器send调用了前端函数时
2.CORS跨域资源共享（服务器响应头中带有access-control-origin时则允许浏览器跨域
3.服务器代理（a浏览器请求a服务器请求b服务器
·····························································································
67.Ajax
Ajax是浏览器提供的一套方法，可以实现无刷新更新数据，提供用户浏览网站应有的体验
Ajax的应用场景-----不刷新页面的情况下，向服务器发送请求，请求数据
1.页面上拉加载更多数据
2.列表数据无刷新分页（公共部分不变化、，只有分页部分变化）
3.表单项离开焦点数据验证
4.搜索框提示文字下拉列表
·····························································································
68.
zepto移动端
ajax pc端
·····························································································
69. Vue v-model的实现原理（day1-案例13）
将input用户输入的值覆盖原值
this.msg = event.target.value;
·····························································································
70.
数据绑定：v-cloak /v-text /v-html v-pre
事件绑定：v-on:click=‘函数名‘
属性绑定：b-bind:href=‘属性名‘
样式绑定：b-bind:class="{ }" b-bind:style="{ }"
·····························································································
71.select下拉菜单如果需要多选，则需要在select后写上multiple，并且在每个option中都要写value值，occupation为一个值时，单选；为数组时，多选
<select v-model=‘occupation‘ multiple>
<option value="0">请选择职业...</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
·····························································································
72.input的多选和单选都需要写value值，然后
用一个变量来控制，若变量为一个值，则为默认单选；
若变成为一个数组，则默认多选
·····························································································
73. 计算属性写在conputed中
要有返回值，必须写return
·····························································································
74.Vue图书管理案例：
应用场景：
过滤器-格式化日期
自定义指令-获取表单焦点
计算属性-统计图书数量
侦听器-验证图书存在性
生命周期--图书数据处理
·····························································································
75. this的指向问题：5种情况
1.全局函数：this代表window
2.定时器的this：代表window
3.对象的方法：调用方法的对象
4.事件处理函数“触发事件的对象
5.构造函数：代表新创建的实例对象
6.箭头函数中没有this，用的this是外层函数中的this
·····························································································
76.
token 只应该在当前网站打开期间生效，所以将token保存在sessionStorage中
sessionStorage：会话期间的存储机制，浏览器关闭时自动销毁
localStorage 存储在浏览器中，无期限
·····························································································
77.
退出功能：销毁本地的token值
window.sessionStorage.clear();
·····························································································
78. 处理项目中的ESlint语法报错问题
创建一个.prettierrc 文件
{
"semi":false, 表示格式化的时候不加分号
"singleQuote": true 表示格式化代码时用单引号替换双引号
}
·····························································································
79.屏幕取色器快捷键 ：alt+a
·····························································································
80.
el-row 行
el-col 列
ref属性 addFormRe
对话框的方法，都是通过ref属性(该对话框的实例对象)来引用的。
this.$refs.addFormRef.resetFields()
:rules属性 :rules="editFormRules"
用来做表单验证规则
//修改用户的表单验证规则
editFormRules:{
email:[
{required:true,message:‘请输入邮箱‘,trigger:‘blur‘},
{validator:checkEmail,trigger:‘blur‘}
],
mobile:[
{required:true,message:‘请输入手机号‘,trigger:‘blur‘},
{validator:checkMobile,trigger:‘blur‘}
]
},
el-form-item 中的prop属性，表单验证规则里的其中一项，需要被表单验证就需要添加该属性
prop="email"
:visible.sync属性 组件的显示或隐藏
一般:visible.sync：后跟一个变量，通过按钮来控制该属性的变化
定义时： :visible.sync="editDialogVisible"
使用时： @click="editDialogVisible = false"
:model 该表单要引用哪个数据：
:model="editForm"
//查询到的用户信息对象 （通过axios发送请求服务器响应的数据存放到editForm中
editForm:[],
原文：https://www.cnblogs.com/mdr86553/p/11925807.html