1、鼠标改变形状
css的cursor属性
default 默认光标(通常是一个箭头) auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针(一只手) url (绝对地址)自定义鼠标图片样式 move 此光标指示某对象可被移动。 e-resize 此光标指示矩形框的边缘可被向右(东)移动。 ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。 n-resize 此光标指示矩形框的边缘可被向上(北)移动。 se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 s-resize 此光标指示矩形框的边缘可被向下移动(南)。 w-resize 此光标指示矩形框的边缘可被向左移动(西)。 text 此光标指示文本。 wait 此光标指示程序正忙(通常是一只表或沙漏)。 help 此光标指示可用的帮助(通常是一个问号或一个气球)。
请把鼠标移动到单词上，可以看到鼠标指针发生变化：
Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
2、文本控制行数
//一下三行限制文字为一行，多的省略
overflow : hidden;
text-overflow: ellipsis;
white-space : nowrap;
//以下四行代码限制行数
display : -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;//填行数
overflow : hidden;
英文字母和数字不换行
word-break:break-all;只对英文起作用，以字母作为换行依据
word-wrap:break-word; 只对英文起作用，以单词作为换行依据
3、盒子：
margin
border
padding
4、背景
纯色背景：
width : 100%;
height : 100%;
background-color : #ddd;
background-size : cover;
background-repeat: no-repeat;
background-position: center;
背景图片：
5、居中一行
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
6、？
display:flex;不会让容器本身取消它的块装的属性，但它的子元素会变成行内块的的属性
display: inline-flex;父级是变成行内块元素，他的子元素也是行内块元素，并且自动换行
7、文本对齐
text-align:水平对齐
center
left
right
justify 拉伸每一行，宽度相等
//改变文本方向
direction: rtl;
unicode-bidi: bidi-override;
vertical-align 垂直对齐
top
middle
bottom
text-decoration: 装饰文本
overline
line-through
underline
none; 通常用于从链接上删除下划线：
text-transform 翻译字母
uppercase 全大写
lowercase 全小写
capitalize 首字母大写
text-indent: 50px;首行缩进
letter-spacing: -3px;减少/增加字间距
line-height: 0.8; 行高
word-spacing: 10px; 单词间距
white-space: nowrap;禁用换行
text-shadow: 2px 2px 5px red; 阴影/水平 垂直 模糊 颜色
8、旋转90度
transform-origin:50% 50%; //以中心为旋转点 transform: rotate(90deg); //旋转多少度
10、浮动
float：left
overflow:hidden来清除浮动，那么最好加上zoom:1;
11、js数组删除某一项
arr.splice(index,1,) //index下标，1要删除的项目数量，0表示不删除
arr.splice(index,2,item,item2) //替换,从小标开始替换两个
12、时间戳转化
{{ time | utcTime }}
13、vue的钩子函数
beforeRouteEnter(to, from, next) {
console.log(this, 'beforeRouteEnter'); // undefined
console.log(to, '组件独享守卫beforeRouteEnter第一个参数');
console.log(from, '组件独享守卫beforeRouteEnter第二个参数');
console.log(next, '组件独享守卫beforeRouteEnter第三个参数');
next(vm => {
//因为当钩子执行前，组件实例还没被创建
// vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
console.log(vm);//当前组件的实例
});
},
beforeRouteUpdate(to, from, next) {
//在当前路由改变，但是该组件被复用时调用
//对于一个带有动态参数的路径 /good/:id，在 /good/1 和 /good/2 之间跳转的时候，
// 由于会渲染同样的good组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
console.log(this, 'beforeRouteUpdate'); //当前组件实例
console.log(to, '组件独享守卫beforeRouteUpdate第一个参数');
console.log(from, '组件独享守beforeRouteUpdate卫第二个参数');
console.log(next, '组件独享守beforeRouteUpdate卫第三个参数');
next();
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
console.log(this, 'beforeRouteLeave'); //当前组件实例
console.log(to, '组件独享守卫beforeRouteLeave第一个参数');
console.log(from, '组件独享守卫beforeRouteLeave第二个参数');
console.log(next, '组件独享守卫beforeRouteLeave第三个参数');
next();
}
14、ant on design
this.$refs.table.refresh() 刷新
this.form.resetFields()清空
15、css优先执行
css样式优先级排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性(同优先级时，后面的层叠前面的样式)；
16、阴影
box-shadow
17:css选择器
奇数和偶数
:first-child 第一个子元素 :last-child 最后一个子元素 :nth-child() 选中第n个元素 关于:nth-child()的特殊值 n 第n个 n的范围0到正无穷（全选） even或2n 选中偶数位的元素 odd或2n+1 选中奇数位得到元素 上面的都是在所有元素中选择 下面都是在相同元素中选择 :first-of-type 第一个子元素 :last-of-type 最后一个子元素 :nth-of-type() 选中第n个元素 :not() 将符号条件的元素去除
18、页面滤镜，（让整个页面变黑白）
<style type="text/css">
html {
FILTER: gray;
-webkit-filter: grayscale(100%);
}
</style>
filter是滤镜的意思，filter:gray的意思就是说给页面加上一个灰度的滤镜，所以html里面的所有内容都会变成黑白的了。 不过这个滤镜对于chrome和safari浏览器是无效的，所以下面会有一行-webkit-filter: grayscale(100%); 这个样式是专属于使用webkit内核的浏览器的，意思和FILTER: gray;差不多，只是写法不同罢了。 19、将富文本格式的字符串转化为普通字符串 replace(/<(.*?)>/g, '')
19、将富文本转化为字符串
let str = '<p>asd</p>' str.replace(/<(.*?)>/g, '') console.log(str) // 'asd'
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
