关于前端实现平方等上下角标的方法

方法一:直接复制法

m² m³ m⁴ m⁵ mⁿ
m⁰¹²³⁴⁵⁶⁷⁸⁹
详情参考

方法二:标签法

在这里插入图片描述

<div>m<sup>2</sup></div>
<div>m<sup>3</sup></div>
<div>m<sup>0123456789</sup></div>
<div>x<sub>2</sub></div>
<div>x<sub>3</sub></div>
<div>x<sub>0123456789</sub></div>

方法三:CSS 法

在这里插入图片描述

<div>q<span class="sup1">2</span></div>
<div>w<span class="sup2">3</span></div>
<div>e<span class="sup3">4</span></div>
<div>r<span class="sup4">0123456789</span></div>

<div>z<span class="sub1">2</span></div>
<div>x<span class="sub2">3</span></div>
<div>c<span class="sub3">a</span></div>
<div>v<span class="sub4">0123456789</span></div>
.sup1 {
    
    
	vertical-align: super;
	font-size: small;
}

.sup2 {
    
    
	vertical-align: super;
	font-size: smaller;
}

.sup3 {
    
    
	vertical-align: super;
	font-size: x-small;
}

.sup4 {
    
    
	vertical-align: super;
	font-size: xx-small;
}

.sub1 {
    
    
	vertical-align: sub;
	font-size: small;
}

.sub2 {
    
    
	vertical-align: sub;
	font-size: smaller;
	}

.sub3 {
    
    
	vertical-align: sub;
	font-size: x-small;
}

.sub4 {
    
    
	vertical-align: sub;
	font-size: xx-small;
}

font-size 使用的是smaller时,角标的大小会随着父元素的文字大小相应变化。
在这里插入图片描述
添加的代码

body {
    
    
	font-size: 40px;
}

方法四:特殊符号法(只能写平方和三次方)

平方:&sup2;&#178
三次方:&sup3;&#179
在这里插入图片描述

<div>a&sup2;</div>
<div>s&sup3;</div>
<div style="font-size: 40px;">d&sup2;</div>
<div style="font-size: 40px;">f&sup3;</div>

使用html特殊字符编码,只有平方&sup2;三次方&sup3;这两个,他们也会随着字体的增大而增大。

如有错误,欢迎指正,谢谢!
以上内容仅供参考,欢迎大家讨论。

猜你喜欢

转载自blog.csdn.net/thirteen_king13/article/details/120435607