![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
qq_41800649
这个作者很懒,什么都没留下…
展开
-
viewport、布局视口、视觉视口、理想视口 深入理解
https://www.jianshu.com/p/7c5fdf90c0ef转载 2020-07-31 23:03:13 · 276 阅读 · 0 评论 -
vscode 自动转换css为rem
安装cssrem点击进入设置中心在设置页面的输入框中输入“cssroot”,修改1rem代表的px值。系统默认设置为的是16px。重启VScode,键入px时会自动提示可以转换后的rem单位原创 2020-07-23 14:00:21 · 1708 阅读 · 1 评论 -
精灵图在线测量,自动生成想要图片的宽高及位置
在线工具网站:http://www.spritecow.com/1.点击select sprite2.按住鼠标并拖动,选择想要的精灵图,在下面的代码区域会自动的生成代码3.直接复制代码就可原创 2020-07-18 22:06:35 · 3240 阅读 · 3 评论 -
VSCode ctrl+s自动格式化代码
步骤1:步骤二:步骤三:原创 2020-07-09 11:11:43 · 5104 阅读 · 0 评论 -
HTML5的严格模式和混杂模式与!DOCTYPE的关系
1.前言:在讲HTML5的严格模式与混杂模式之前,我们需要谈谈HTML文件第一行必有的<!DOCTYPE>2.在HTML文件的第一行,我们都会注意到有一行<!DOCTYPE>,这是什么意思呢?其实<!DOCTYPE>是专门用来说明文档类型的,便于浏览器按指定的规则渲染页面。3.那这跟标题中的严格模式与混杂模式有什么关系呢?其实,使用了<!DOCTYPE>就表明HTML文档采用了标准模式:CSS1Compat。而不使用<!DOCTYPE>原创 2020-05-15 10:13:10 · 540 阅读 · 2 评论 -
对于v-for动态生成的元素,巧用v-if v-else实现有数据和没数据两种不同的显示效果
代码:<div class="videos" v-for="(item,index) in currentVideos" :key="index"> <!-- <iframe :src="item.src" width="100%" height="100%" allowfullscreen></iframe> --> ...原创 2019-11-29 22:40:26 · 513 阅读 · 0 评论 -
vue采坑@keyframe:分页时钟功能
问题描述:第一次刷新页面能实现指针旋转,后面再切换分页或刷新页面均不能实现动画效果分析:切换页面时,vue只更改了数据,样式没有跟着改变解决:<div class="chart" v-for="(item,index) in currentDetectors" :key="index"> <div class="chartContent" v-if="i...原创 2019-11-29 21:51:25 · 496 阅读 · 0 评论 -
v-for实现点击每个元素设置其背景,当刷新页面时,恢复默认状态
小技巧,大作用效果图:代码:(核心见内部注解)<template> <div class="page" v-if="showPage"> <div class="number" v-for="(item,index) in currentPages" :key="index" @click="appo...原创 2019-11-29 21:35:20 · 196 阅读 · 0 评论 -
采坑:时钟表盘中关键帧@keyframes命名相同导致多个动画用上一种效果
问题描述:多个div设置不同效果的关键帧@keyframes后,显示的效果却是一样的非理想效果:错误代码(精简版): .pointer1 { animation: pointermove 3s; @keyframes pointermove { from { transform: rot...原创 2019-11-27 23:53:00 · 509 阅读 · 0 评论 -
关于CSS的lineheight属性的总结
关于CSS的lineheight属性的总结参考文档:深入了解css的行高Line Height属性一.定义lineheight的五种方式:lineheight:normal子元素会继承由父元素计算出来的fontsize1.2lineheight:120%;子元素会继承由父元素计算出来的fontsize120%lineheight:1.5(推荐)子元素会继承由父元素计算出来的fon...转载 2019-10-30 10:37:10 · 146 阅读 · 0 评论 -
原javascript语法
????Array对象array.concat()连接多个数组,返回一个新数组array.join(",")指定分隔符连接数组元素array.reverse 颠倒元素顺序,会改变原数组array.slice(start,end)返回指定元素array.sort(function)按照unicode排序 function可设置返回顺序 (a,b)=> (b–a) 降序????字符串对象par...原创 2019-11-21 21:20:19 · 72 阅读 · 0 评论 -
Grid网格布局
????grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。px % repeat() fr????grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列的间隔(列间距)。grid-gap: ;grid-gap: 20px 20px;如果grid-gap省略了第二个值,浏览器认为...转载 2019-11-21 21:25:04 · 120 阅读 · 0 评论 -
flex弹性布局
????flex-direction: row | row-reverse | column | column-reverse;属性决定主轴的方向(即项目的排列方向)。????flex-wrap: nowrap | wrap | wrap-reverse;项目换行方式????flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。flex-f...原创 2019-11-21 21:25:45 · 78 阅读 · 0 评论 -
ES5新增语法汇总
????总:5个迭代方法:forEach()、map()、filter()、some()、every();2个索引方法:indexOf() 和 lastIndexOf();2个归并方法:reduce()、reduceRight();场景:循环遍历数组,每个元素做相同操作:????for循环????es5的forEach循环优点:不用写for循环缺点:需要新建数组,每一次循环都要push????es5的m...原创 2019-11-21 21:18:42 · 639 阅读 · 0 评论 -
ES6新增语法
????let声明的变量只有在当前作用域有效,不存在变量提升,不允许重复声明。????const声明一个只读的常量。常量:值不可以改变的量。学了const和let之后,尽量别用var????array.find(callback)返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。????array.findIndex(callback)返回数组中满足提供的测试函数的第一个元素的索引。...原创 2019-11-21 21:24:11 · 99 阅读 · 0 评论