Utility辅助类

## 样式辅助
一些常用样式的 class，与 LESS minxins 的区别在于：mixins 在样式中调用，而 utility 直接在 HTML 中引用。比如要对一个元素清除浮动，在元素上添加 am-cf 这个 class 即可。
### 文本颜色
<div class = "textDiv">
<span style="color:black;">我是谁?我从哪里来?我到哪里去?</span><br/>
<span style="color:#3391d1;">我是谁?我从哪里来?我到哪里去?</span><br/>
<span style="color:#dbd9e0;">我是谁?我从哪里来?我到哪里去?</span><br/>
<span style="color:#32CD32;">我是谁?我从哪里来?我到哪里去?</span><br/>
<span style="color:orange;">我是谁?我从哪里来?我到哪里去?</span><br/>
<span style="color:red;">我是谁?我从哪里来?我到哪里去?</span><br/>
<span style="color:#1890ff;">我是谁?我从哪里来?我到哪里去?</span><br/>

------------
通过 `hi-text-primary` 、`hi-text-normal`、`hi-text-success`、`hi-text-warning`、`hi-text-error`,`hi-text-link`

------------
代码示例如下

```html
    <div >我是谁?我从哪里来?我到哪里去?</div>
    <div class="hi-text-primary">我是谁?我从哪里来?我到哪里去?</div>
    <div class="hi-text-normal">我是谁?我从哪里来?我到哪里去?</div>
    <div class="hi-text-success">我是谁?我从哪里来?我到哪里去?</div>
    <div class="hi-text-warning">我是谁?我从哪里来?我到哪里去?</div>
    <div class="hi-text-error">我是谁?我从哪里来?我到哪里去?</div>
    <div class="hi-text-link" href="#">我是谁?我从哪里来?我到哪里去?</div>
```

</div>

### 文字大小
- sm 12
- lg 16
- xl 20
- xxl 24
- xxxl 30
- max 38

<div class = "textDiv">
<span style="font-size:12px;">我是谁?我从哪里来?我到哪里去?</span><br/>
<span>我是谁?我从哪里来?我到哪里去?</span><br/>
<span style="font-size:16px;">我是谁?我从哪里来?我到哪里去?</span><br/>
<span style="font-size:20px;">我是谁?我从哪里来?我到哪里去?</span><br/>
<span style="font-size:24px;">我是谁?我从哪里来?我到哪里去?</span><br/>
<span style="font-size:30px;">我是谁?我从哪里来?我到哪里去?</span><br/>
<span style="font-size:38px;">我是谁?我从哪里来?我到哪里去?</span><br/>

------------

通过 `hi-text-sm` 、`hi-text-lg`、`hi-text-xl`、`hi-text-xxl`、`hi-text-xxxl`、`hi-text-max`

------------
代码示例如下
```html
    <div class="hi-text-sm">我是谁?我从哪里来?我到哪里去?</div>
    <div >我是谁?我从哪里来?我到哪里去?</div>
    <div class="hi-text-lg">我是谁?我从哪里来?我到哪里去?</div>
    <div class="hi-text-xl">我是谁?我从哪里来?我到哪里去?</div>
    <div class="hi-text-xxl">我是谁?我从哪里来?我到哪里去?</div>
    <div class="hi-text-xxxl">我是谁?我从哪里来?我到哪里去?</div>
    <div class="hi-text-max">我是谁?我从哪里来?我到哪里去?</div>
```

</div>

### 文本左右对齐
<div class = "textDiv">
<p style="float:left">左对齐</p><br/>
<p style="float:right">右对齐</p><br/>
<p style="text-align:center;">居中</p>

------------
通过 `hi-text-left 、hi-text-center、hi-text-right`

------------
代码示例如下
```html
        <div class="hi-text-left">左对齐</div>
        <div class="hi-text-right">右对齐</div>
        <div class="hi-text-center">居中</div>
```
</div>

### 垂直对齐
垂直对齐的原理为把父容器内的 “幽灵”元素（使用伪元素）高度设置为 100%，再通过设置需要对齐的元素 vertical-align 属性实现
<div class = "textDiv">
<div style="display: flex; flex-direction: column; width: 100%; height: 100px; justify-content: space-between;border:1px #ddd dashed;">
<div>右对齐</div>
<div style ="margin-left:50px">居中</div>
<div style ="margin-left:100px">居中</div>
</div>
</div>

------------
通过 `hi-text-left 、hi-text-center、hi-text-right`

------------
代码示例如下
```html
<div class="hi-valign" style="height:100px;border:1px #ddd dashed">
        <span class="hi-valign-top">右对齐</span>
        <span class="hi-valign-middle">居中</span>
        <span class="hi-valign-bottom">居中</span>
</div>
```

</div>

### 元素显示
- `hi-block` - display 设置为 block
- `hi-inline` - display 设置为 inline
- `hi-inline-block` - display 设置为 inline-block

### 溢出省列号

<div class="textDiv">
<div style="width: 250px; padding: 10px;">
千万不要因为走得太久，而忘记了...
</div>

------------
通过 `hi-text-truncate` 配合样式宽度，溢出省列号

------------
代码示例如下
```html
    <div class="hi-text-truncate" style="width: 250px; padding: 10px;">
    千万不要因为走得太久，而忘记了我们为什么出发
    </div>
```

</div>

| Class名称 | 说明 |
| --- | --- |
| .hi-text-truncate | 禁止换行，超出容器部分截断（以 `...`结束） |
| .hi-text-break | 超出文字容器宽度时强制换行，主要用于英文排版 |
| .hi-text-nowrap | 禁止换行，不截断超出容器宽度部分 |

### 多行文字截断

<div class="textDiv">
<div style="width:200px; overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;">
千万不要因为走得太久，而忘记
了我们为什么出发 千万不要因为...
</div>

------------
通过 `-webkit-line-clamp` 样式控制要显示的行数

------------
代码示例如下
```html
   <div style="width:200px; overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;">
    千万不要因为走得太久，而忘记了我们为什么出发
    千万不要因为走得太久，而忘记了我们为什么出发
    千万不要因为走得太久，而忘记了我们为什么出发
    千万不要因为走得太久，而忘记了我们为什么出发
    </div>
```
</div>

### 内外边距
- lg: 24px
- md: 16px
- sm: 12px
- xs: 8px
- xss: 4px

| Margin | Padding |
| --- | --- |
| hi-mrghi-mrg-{size} | hi-padhi-pad-{size} |
| 水平方向外边距hi-mrg-horhi-mrg-hor-{size} | 水平方向内边距hi-pad-horhi-pad-hor-{size} |
| 垂直方向外边距hi-mrg-verhi-mrg-ver-{size} | 垂直方向内边距hi-pad-verhi-pad-ver-{size} |
| 左外边距hi-mrg-lthi-mrg-lt-{size} | 左内边距hi-pad-lthi-pad-lt-{size} |
| 右外边距hi-mrg-rthi-mrg-rt-{size} | 右内边距hi-pad-rthi-pad-rt-{size} |
| 上外边距hi-mrg-bthi-mrg-tp-{size} | 下内边距hi-pad-bthi-pad-bt-{size} |

### 圆角样式
<div class="textDiv">
<div style="border:1px #ddd solid;width:100px;border-radius:5px">圆角</div>
<br/>
<div style="border:1px #ddd solid;height:100px;width:300px;border-radius:50%">椭圆</div>
<br/>
<div style="border:1px #ddd solid;height:100px;width:100px;border-radius:50%">圆形</div>

------------
通过 `hi-radius`、`hi-round`、`hi-circle` 样式进行浮动布局。

------------
代码示例如下
```html
    <div class="hi-radius hi-mrg hi-text-center" style="border:1px #ddd solid;width:100px;">圆角</div>
    <br/>
    <div class="hi-round hi-mrg hi-text-center" style="border:1px #ddd solid;height:100px;width:300px">椭圆</div>
    <br/>
    <div class="hi-circle hi-mrg hi-text-center" style="border:1px #ddd solid;width:100px;height:100px;">圆形</div>
```

</div>

### 活动布局
<div class="textDiv">
<p style="float:left">左浮动</p>
<p style="float:right">右浮动</p><br>

------------
通过 `hi-cf、hi-fl、hi-fr` 样式进行浮动布局。

------------
代码示例如下
```html
    <div class="hi-cf">
        <div class="hi-fl">左浮动</div>
        <div class="hi-fr">右浮动</div>
    </div>
```

</div>

</style>