本文探讨了三个前端开发中的常见问题：如何使用CSS保持div元素的固定宽高比，通过相对单位实现字体随视口缩放，以及在Vue中解决 scoped 样式穿透el-input组件的问题。解决方案包括利用padding-bottom属性，使用vw单位，以及掌握:deep()深度选择器的正确用法。
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;
}
坑68（font-size、css、缩放
）：目标是使字体大小随视口大小缩放。使用相对长度单位即可。例如，1vw=1%视口宽度。具体使用需依据情况选择合适单位。
坑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>
坑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，可以改用字符串。
by 莫得感情踩坑机(限定)
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
