工作问题记录 2020.08.20-2020.09.30

---

2020

---

2020.08

---

问题：使用百分比或者rem定义移动端元素高度和位置时遇到不同比例设备出现定位偏移的页面兼容性问题

类型：CSS 页面兼容性
时间：2020/8/20

使用vw定义元素高度和垂直方向位置，通过视口宽度去定义浮动元素高度和垂直方向位置

---

问题：弹窗蒙版触摸穿透

类型：CSS JS 页面功能bug
时间：2020/8/20

在body标签上加入css样式 overflow: hidden;

---

问题：active的导航下加入个性样式

类型：CSS
时间：2020/8/25

---

问题：Photoshop切图后保存图片体积太大

类型：Photoshop
时间：2020/8/20

直接在图层转换为智能对象后导出PNG图片
压缩PNG网站 TinyPNG

---

问题：div内嵌圆形对号选择框

类型：CSS
时间：2020/8/26

使用before添加选择框内形状，示例代码如下

---

2020.09

---

问题：svg标签大小改变，其中的path大小不变

类型：HTML标签属性
时间：2020/9/2

通过在svg代码中添加viewBox属性设置path对应的原大小，就可以使用svg中的width和height属性控制path的大小，示例代码如下

---

问题：transform属性的浏览器兼容问题

类型：CSS
时间：2020/9/3

---

问题：背景图自适应兼容浏览器宽度

类型：CSS
时间：2020/9/3

---

问题：取消CSS盒子模型上下margin重叠

类型：CSS
时间：2020/9/4

• 通过使用流式布局flex，通过创建块级格式化上下文BFC(Block formatting context)，防止margin重叠，示例代码如下
• 使用网格布局grid效果相同

---

问题：CSS缩放后定位偏离左上角，以中心点为缩放基准点，需调整缩放基准点

类型：CSS
时间：2020/9/15

使用 transform-origin: 0 0; 改变缩放基准点位置，使缩放以左上角0px位置为基准点。

---

问题：类似sticky的布局方式

类型：CSS
时间：2020/9/15

通过在外层元素添加 position: relative; 而直接父元素不添加position，子元素添加 position: absolute 的方式实现，示例代码如下

---

问题：两个div中间有缝隙

类型：HTML CSS
时间：2020/9/17

在有缝隙的两个div的父元素设置 font-size: 0; 或 line-height: 0; ，利用消除行间距的原理消除缝隙

---

问题：Vue项目中截图页面

类型：Vue html2canvas
时间：2020/9/21

通过使用html2canvas插件进行截图，示例代码如下

---

问题：Vue项目打包因使用less在calc带入变量而报错

类型：Vue less webpack
时间：2020/9/22

在所带变量位置用{}括起变量名，再在变量前添加@符号，示例代码如下

---

问题：iOS环境下overflow属性无效

类型：CSS Less
时间：2020/9/22

在外层div使用 position:absolute ，示例代码如下

---

问题：Vue防止点击事件穿透

类型：Vue Javascript
时间：2020/9/23

在内层点击事件中添加 event.stopPropagation() ，示例代码如下

---

问题：支付宝账号校验正则表达式

类型：Javascript
时间：2020/9/23

• 手机号正则表达式： /^1[3-9]\d{9}$/
• 邮箱正则表达式： /^[a-zA-Z\d_.-]+@[a-zA-Z\d-]+(\.[a-zA-Z\d-]+)*\.[a-zA-Z\d]{2,6}$/
• 同时支持手机号和邮箱： /^(?:1[3-9]\d{9}|[a-zA-Z\d_.-]+@[a-zA-Z\d-]+(\.[a-zA-Z\d-]+)*\.[a-zA-Z\d]{2,6})$/

---

问题：Vue点击按钮复制链接

类型：Vue Javascript
时间：2020/9/24

使用 document.execCommand('copy'); 复制节点，示例代码如下

---

问题：Vue使用Vant组件库List组件刷新数据后滑动至顶部

类型：Vue Javascript
时间：2020/9/24

通过给滚动的父元素（也就是在调试台查看设置了 overflow：auto 的元素）设置 scrollTop = 0 ，滑动到顶部，注意通过getElementsByClassName获取到的是数组需要加[0]选择元素，示例代码如下

---

问题：Vue中使用stylus时，在calc中引用变量

类型：Vue stylus
时间：2020/9/27

不在calc内部使用变量，而是通过引号中携带百分号后在引号外传参，示例代码如下

---

问题：导航栏点击增加active

类型：Javascript
时间：2020/9/27

示例代码如下

---

问题：flex布局容器被padding撑大

类型：CSS
时间：2020/9/28

在容器中加入 overflow: hidden; 属性

---

问题：span内嵌时span错位

类型：CSS
时间：2020/9/28

vertical-align 属性设置元素的垂直对齐方式，具体参数如下表

属性值	详细描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

---

问题：修改鼠标覆盖按钮时的指针效果

类型：CSS
时间：2020/9/29

在按钮元素添加cursor属性，具体参数如下表

属性值	详细描述
url	需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。