踩坑记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_九月萩的博客-优快云博客

by 莫得感情踩坑机(限定)