踩坑记21 div 固定宽高比 padding-bottom | style scoped 时 :deep(.el-input__inner:focus) | javaScript 八进制
2021/9/7 17:36:22
本文主要是介绍踩坑记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 莫得感情踩坑机(限定)
这篇关于踩坑记21 div 固定宽高比 padding-bottom | style scoped 时 :deep(.el-input__inner:focus) | javaScript 八进制的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求