踩坑记21 div 固定宽高比 padding-bottom | style scoped 时 :deep(.el-input__inner:focus) | javaScript 八进制

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 莫得感情踩坑机(限定)

上一篇:(3)Deep Learning之神经网络和反向传播算法


下一篇:Ubuntu20.04 Deep-wine容器下载地址