htmlayout设计ui 基础篇：[11]super和sub使用

1、第一，我们先来看下 x^2这样的结构

它是由X和2组成的，也就是说

1、这是2个平行元素块

2、把和X同样样式的，2大小变小，而且垂直放到上面就可以了

2、第二，我们先来把简单的平行样式搞定

<div>

<span>X</span>

<span>2</span>

</div>

这时候2个元素平行显示一行

3、第三，我们查下对应的CSS，了解到这种结构可以用

vertical-align:|sub|super

1、代码如下：

<div>

<span>X</span>

<span style="vertical-align:super;">2</span>

</div>

效果如下：

4、代码如下：

<div>

<span>X</span>

<span style="vertical-align:sub;">2</span>

</div>

效果如下：

5、你们可以根据自己的实际需要，调整大小，颜色和元素之间的字间距，这些都是CSS中可以调整的