2019年3月9日前端CSS相关

1、采用element布局,规定盒子宽度后,
在盒子内进行,子盒子的padding ,margin变化,发现,高度都会撑开,但是宽度会像absolute一样并不会强行撑开,父元素宽度。
在这里插入图片描述
2、箭头iconfont导入,后用float:right居右,导致标签高度坍塌,开始误认为是float影响,在下面才知道原因。
3、依旧是iconfont高度坍塌的问题,多次尝试修改代码,其实是因为icon与父元素dd不同步font-size导致,你可以子元素iconfont 的font-size小于父元素,绝不可以大于父元素,会造成列表拉长。
在这里插入图片描述
4、对于定时器菜单移入移出,用户体验感优化的代码写法。
在这里插入图片描述
大致情况如下
1、鼠标全局移入menu,出现list,鼠标继续移入list,出现list消失问题。
方案:因为不在同一个层级,故需要(加入定时器_timer),当移入list时,(取消定时器_timer)。
2、鼠标在menu,出现list,直接移出局外,(加入新定时器_timerDetail),判定即可。
3、鼠标在list,移入menu出现list闪烁效果,
方案:在移入menu时,(取消_timerDetail即可)
4、鼠标在menu之间上下移动,所有菜单都依次快速显示,而不是跳跃性显示。
方案:在menu(加入_timerIn,并在每次进入该方法时,调用clearTimeout(this._timerIn)即可。
5、快速在menu菜单做出入行为,发现一直会闪烁一次list
方案:方法同上,(移出时加入clearTimeout(_timerIn)即可。
此次菜单优化共增加三个定时器,几乎完美符合用户体感。
6、vue 中v-show和v-if的最大区别 ,v-if会执行之后的代码,若数据项为空,则报错。

5、2019年3月9日21:47:48,因祸得福,用的NUXT,起初始终获取不到图片ttf,woff2的url。百度查询是因为没有安装url-loader,后来百般尝试,还是获取不到 ,显示404
在这里插入图片描述
最后误打误撞把cache改成false就加载出来了
百度查询,cache: true,会使页面第二次多次加载读取缓存的结果,可能第一次的缓存结果被冲突了,导致之后一直没获取到。主要还是npx构造的nuxt工程,npx一键构造的工程有许多bug。

猜你喜欢

转载自blog.csdn.net/qq_40196738/article/details/88365166