看完谁再说搞不定上下角标?

一、需求

开发中有一些需要用到上下角标的地方，比如说化学式、数学式、注释。。。除了可以使用上下角标的标签，还可以通过css样式和CV大法实现，以下是具体实现方式。

二、实现方法

（1）标签写法：

 // 上标
 // 下标

示例： 

<div>上标标签
  注释 ^[1]
</div>
            
<div>下标标签
  H₂O 
</div>

（2）css样式写法

将需要被上标或者下标的文本，包裹在span标签中，再给span标签分别设置以下css样式即可

上标：vertical-align: super;

下标：vertical-align: sub;

示例：

<div>上标样式: 2*2= 2 <span style="vertical-align: super">2</span> </div>
<div>下标样式: PM <span style="vertical-align: sub">2.5</span> </div>

（3）CV大法

虽然上下角标的使用场景不是特别多，但是如果页面有多个文本需要用的时候也很头疼，标签和样式都太麻烦了，为了方便高效的开发，（其实只是我懒而已）准备好了一些常用的上下角标，CV过去就可以了：

上标：N¹²³⁴⁵⁶⁷⁸⁹⁰ ⁺ ⁻ ⁼ ⁽ ⁾ ⁿ ʰ ʲ ʳ ʷ ʸ ˡ ˢ ˣ ª ʹ ʺ ʻ ʼ ʽ ˘ ˚ ˜ º ™

下标：PM .₀₁₂₃₄₅₆₇₈₉ ₊ ₋ ₌ ₍ ₎ ˌ ˍ ˎ ˏ ˛

ps:当然如果你有其他更好的办法，可以给我留言噢~