| 名称 | 概念 | 备注 |
|---|---|---|
| clientWidth | 可视区域宽度，包含 padding，但并不包含 border、scrollbar、margin | 单位 px，只读，若元素大小超出可视区域，仅计算可视区域 |
| clientHeight | 可视区域高度，包含 padding，但并不包含 border、scrollbar、margin | 单位 px，只读，若元素大小超出可视区域，仅计算可视区域 |
| clientTop | 元素上边框宽度，不包含上部的 padding 与 margin | 单位 px，只读，与 borderTopWidth 属性相同 |
| clientLeft | 元素左边框宽度，不包含左部的 padding 与 margin | 单位 px，只读，与 borderLeftWidth 属性相同，如果该元素有滚动条且 direction 为 right-to-left，在 windows 平台非 IE 浏览器该属性返回值为左边框宽度+滚动条宽度，IE 返回值为 0，在 macOS 平台均返回左边框宽度 |
css 新标准下透明度也可写在 rgb 方法中，且可以不写逗号如rgb(0 0 0 / 100%)，该标准已被最新的浏览器实现，但尚未被 CSS 预处理器如 sass 和微信小程序实现，故暂时不推荐使用最新的写法，会造成预处理器编译错误和小程序白屏。
参考资料
平时公司都在用 react，最近正好一个项目原先的代码使用了 vue 框架，项目只是 demo 阶段，代码量还很少，而且 vue3 已发布接近一年了，就考虑在这个项目上切换 vue3 框架。
自 2020 年 9 月 vue 正式发布 vue3 版本后，已接近一年时间，官方已经有了中文版 vue3 文档，通读官方文档并尝试后，感觉与 typescript 结合使用，并没有想象中那么丝滑。遂又去官方 github 上查询资料，发现 script setup 标签更适合与 typescript 结合使用。犹记得 2020 年底时 script setup 标签与 ref 语法糖还是引起了很大的争议的，而官方文档中却又都未提及。查询 rfcs 后发现 script setup 标签刚刚正式定版，在 3.1.3 版本中正式发布，在 3.2.0 版本中去除试验状态，成为正式的语法。而 ref 语法糖因为太过激进，语法与 js 差异太大，而被废除。
综合来看，当下 vue 官方文档对 vue3 的介绍重点还在于与 vue2 版本的兼容，vue2 的绝大部分语法，vue3 依然支持，vue3 只是在 vue2 的基础上增加了 setup 函数。与 typescript 的结合使用，也是基于 vue2 兼容加 setup 函数的基础上介绍，甚至在 props 定义类型时，还混合了 typescript 类型断言与 js 的类型构造函数，感觉有些别扭。而官方文档中尚未提及的 script setup 标签语法，才像是 vue3 不考虑 vue2 语法兼容性的功能完整释放，借助一系列 API，也可以与 typescript 有更好的结合使用体验。
| 符号 | 英文名 | 中文名 |
|---|---|---|
| ~ | tilde or swung dash | 波浪字符或代字号 |
| ` | Acute, Back quote, grave, grave accent, left quote, open quote, or a push | 锐音符 |
| ! | Exclamation mark, Exclamation point, or Bang | 惊叹号 |
| @ | Ampersat, Arobase, Asperand, At, At symbol or commercial at | 爱特或小老鼠 |
| # | Octothorpe, Number, Pound, sharp, or Hash | 井号 |
| £ | Pounds Sterling or Pound symbol | 英镑 |
| € | Euro | 欧元 |
| $ | dollar sign | 美元符 |
| ¢ | Cent sign | 美分 |
| ¥ | Japanese Yen | 日元 |
| § | Micro or | Section |
| % | percent sign | 百分号 |
| ° | Degree | 度 |
| ^ | caret or Circumflex | 脱字符 |
| & | Ampersand, Epershand, or And | 与和符 |
| * | Asterisk and sometimes referred to as star. | 星号 |
| () | open close parentheses, round brackets, soft brackets, or circle brackets | 小括号，圆括号 |
| [] | open close brackets (US), square brackets, closed brackets or hard brackets | 中括号，方括号 |
| {} | open close braces (UK and US), French brackets, curly brackets | 大括号，花括号 |
| <> | angle brackets or chevrons | 尖括号 |
| _ | underscore | 下划线 |
| + | plus sign | 加号 |
| − | Hyphen, Minus or Dash | 减号 |
| = | equals sign | 等号 |
| < | Less Than or Angle brackets | 小于号 |
| > | Greater Than or Angle brackets | 大于号 |
| . | period, full stop or dot | 句号，点 |
| , | comma | 逗号 |
| : | colon | 冒号 |
| ; | semicolon | 分号 |
| ? | question mark | 问号 |
| - | hyphen | 连字符 |
| … | ellipsis | 省略号 |
| – | dash | 破折号 |
| / | Forward slash, Solidus, Virgule, or Whack | 斜线 |
| \ | Backslash or Reverse Solidus | 反斜线 |
| Pipe, Or, or Vertical bar | 竖线 | |
| “ | Quote, Quotation mark, or Inverted commas | 双引号 |
| ‘ | Apostrophe or Single Quote | 单引号，省略符号 |
参考资料 键盘上的特殊字符都叫啥
在对接客户过程中，客户不使用天地图作为地图服务，而要求使用他们发布好的 ArcGIS Server 离线瓦片地图，ArcGIS 离线地图的 z、x、y 规则与 leaflet 地图引擎的默认解析规则不一致，故需要扩展 leaflet 的 TileLayer。
leaflet 的 TileLayer 通过内部的 getTileUrl 回调方法去获取瓦片路径，getTileUrl 会传入一个对象，对象中包含地图层级 z，瓦片横坐标 x，瓦片纵坐标 y。这些数据都为十进制数，与 ArcGIS 的瓦片解析规则不一致。
ArcGIS Server 切片后路径规则如下：
可以看出 ArcGIS Server 切片规则：
小程序中按 echarts 官方文档引入 echarts，而后将 web 端 echarts 图表的配置（setOption 中需要的 options 对象）复制过来使用，发现小程序开发工具中可以正常加载图表，但一使用预览，就无法加载图表，而在预览下打开 vConsole 调试，直接闪退；使用真机调试，直接报错Cannot not read property 'createView' of undefined。
在微信开放社区查找相关错误，发现社区中关于真机调试报Cannot not read property 'createView' of undefined错误的原因是真机调试不支持 canvas 2d，但预览模式是没问题的，故判断无法加载图表并闪退并非因为Cannot not read property 'createView' of undefined错误造成。
对比 echarts 官方示例，发现 echarts 官方示例加载完全没有问题，这时才开始怀疑是配置对象造成了加载失败（一直没有怀疑是因为 web 端加载无误，开发工具中加载也无误）。逐个调试配置对象，终于发现配置对象中，对颜色的定义有一行为rgb(20 194 59)，rgb 值中间未使用逗号分隔，这是 CSS4 的标准，而小程序并不支持 CSS4 标准的 color，用逗号分隔后，就没有问题了。