2021.9.7
坑67(div、css、固定宽高比 ):目标是使div元素在缩放时宽高比固定。因为 垂直方向上的内外边距使用百分比做单位时,是基于包含块的宽度来计算的。所以使用 padding-bottom实现宽高比固定的元素块。 实现:divBox实现固定宽高比,divContent则为其中内容,实现内容定位。.divBox {
/* 相对位置,定位基于该元素原先位置 */
position: relative;
/* 宽:高=4:3 */
width: 40%;
height: 0;
padding-bottom: 30%;
}
.divContent {
/* 绝对位置,定位基于父元素位置 */
position: absolute;
/* 充满父元素 */
top: 0;
right: 0;
bottom: 0;
left: 0;
}
参考:
面试官:CSS如何实现固定宽高比? - 云+社区 - 腾讯云 (tencent.com)
position - CSS(层叠样式表) | MDN (mozilla.org)
坑68(font-size、css、缩放
):目标是使字体大小随视口大小缩放。使用相对长度单位即可。例如,1vw=1%视口宽度。具体使用需依据情况选择合适单位。
参考:
CSS 单位 (w3school.com.cn)
关于css:基于容器宽度的字体缩放 | 码农家园 (codenong.com)
坑69(el-input、
el-input__inner:focus
、scoped、css
):目标是改变el-input处于focus状态时的border颜色。检查页面元素发现是在.el-input__inner:focus中变更的。于是直接更改,代码如下:(style非scoped时可成功)
.el-input__inner:focus {
border-color: #FF9505 !important;
}
但是毫无效果,检查页面元素可以看到该样式甚至没有被添加到元素中,也就是说选择器没有成功选到对应元素。
排查发现是因为
style使用了scoped,限制了样式渗透。需要使用深度选择器,这里使用了::v-deep(使用>>>和/deep/的话,均会标红),代码如下:
<style scoped>
::v-deep .el-input__inner:focus {
border-color: #FF9505 !important;
}
</style>
可以成功达到效果,但提示编译器会提示如下:
[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.表示::v-deep用法已被弃用,请使用 :deep(内部选择器)代替。 于是最终代码如下:
<style scoped>
:deep(.el-input__inner:focus) {
border-color: #FF9505 !important;
}
</style>
参考:
解决在Vue3.x中使用::v-deep .xxx出现警告的问题 - 锋旭 (snixu.com)
vue中的css深度选择器 :deep(<inner-selector>)、/deep/、>>>、::v-deep 到底是什么? - 掘金 (juejin.cn)
rfcs/0023-scoped-styles-changes.md at master · vuejs/rfcs · GitHub by尤雨溪
Vue style 深度作用选择器 >>> 与 /deep/(sass/less) - 贝尔塔猫 - 博客园 (cnblogs.com)
Scoped CSS | Vue Loader (vuejs.org) 深度作用选择器
坑70(error、javaScript、
八进制
):运行时报错如下。
Octal literals are not allowed in strict mode.表示 严格模式下不允许八进制字面量。这里不允许的写法是指 旧版的以0为前缀的八进制写法。所以Number不能有01、001、000.1这样不合日常数字的写法。而 新版的八进制写法是以0o为前缀,在javaScript中可以使用,例如0o77,对应十进制的63。 解决报错:将代码中的id=01,改为id=1。如果需要01,可以改用字符串。 参考: Legacy octal literals are not allowed in strict mode_九月萩的博客-CSDN博客
by 莫得感情踩坑机(限定)