集思广益: 一日三餐gif、calc、代码风格【1】
集思广益
欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论
提问
- 如何实现默认显示git的第一帧图片,当鼠标经过时,播放完整的gif动画
- 你在使用calc过程中遇到过哪些坑?如何解决?
- 说说你对堆栈跟踪的理解
早餐
如何实现默认显示git的第一帧图片,当鼠标经过时,播放完整的gif动画
回答:
思路1
我想到的方式之一,是手动拆帧,通过mac自带的图片浏览器,导出第一帧作为封面背景,然后将gif图片设置透明度为0,当鼠标经过的时候,将其透明度设置为100%,就会视觉效果上自动播放;
思路2
求JYM们献策
中餐
你在使用calc过程中遇到过哪些坑?如何解决?
这里先做个介绍:
css3
的calc()函数允许我们在属性值中执行数学计算操作。例如,我们可以使用calc()指定一个元素宽度的固定像素值为多个数值的和。
calc(表达式)
- 表达式支持加、减、乘、除运算,同时也支持单位的混合使用(%、px、rem、em等);
- 表达式中有”+”、”-“运算符的,前后必须要有空格,这个是向前兼容,后期可能会带入变量等有”-“连字符;
- 虽然“*”“/”没有空格可以运算,但是为了保持格式上的统一,一般加空格。
坑一:
+-符号之间一定要写空格
width: calc(100%-50px); // 失效
width: calc(100% - 50px); // 正确的写法
坑二:
calc是css3中增加的一个自动计算长度的方法,而在less中,less的运算方式会和calc发送冲突。可以写成:
width: calc(~'100% - 60px');
坑三:
加减是必须都带相同单位或百分比与一个带单位
width: calc(100% - 10px);
坑四:
乘除是只能有一个带单位 不能除0
height: calc(30px / 3);
width: calc(20% - 10px);
坑五:
JYM有什么坑洼呢?
晚餐
如何保证团队内部一致的代码风格
我说说我们团队 针对Vue3框架的方案就是ESLint+Prettier,一键保存+自动格式化 具体可看Vue3.2: 记Vite+ESLint与Prettier项目搭建实用配置
至于Git的规范可看之前我的总结: Git: 说说我们的版本控制^o^实用干货篇
欢迎分享你们的团队代码风格方案
转载自:https://juejin.cn/post/7205390655858606135