_class 属性

项目中预置了大多数常见的单属性，我们可以通过简写的形式去使用，要想类名生效一定要遵守约定。

举几个例子来说明一下：

1. 设置display: none；可以通过d-n。
2. 设置color: red；可以通过c-red。
3. 设置position: relative；可以通过p-r。
4. 设置padding-top: 5px；可以通过pt-5。
5. 设置margin-top: -10px；可以通过mt--10；
6. 设置cursor: pointer；可以通过c-p；
7. 设置width: 50%；可以通过w_50。

类名的设定只要遵循以下几个原则：

1. key中没有短横线，则直接取首字母，key中有短横线，则取短横线分割之后的每个首字母。
2. value中没有短横线，直接取首字母，value中有短横线，则取短横线分割之后的每个首字母。
3. 将上面取到的两部分用短横线拼接起来，这样就构成了简写类名。
4. 如果属性是颜色，那么短横线后面就直接拼接去掉#的颜色值，或者完整英文。
5. 如果属性是宽高等数值类型，那么默单位为px，短横线后面直接拼接数值即可，如果是负值那么就用两个短横线连接，如果是百分比值那么就用下划线连接。如果是其他单位，那么需要在最后面明确指定。
6. 对于有冲突的属性，比如min-width和max-width简写都是mw，那么就需要前缀全拼，即minw-50或maxw-50。

上面这些约定是一个基本约定，但是也有一些特殊的属性具有特定的写法，具体内容可以浏览下面的示例部分

类名格式

与将自定义类名绑定给组件，一个类名绑定多个属性对不同，我们这里是使用的单元类名的方式，也就是说你写的每一个类名都对应了一个单独属性对。

代码会根据类名自动生成相应的样式属性，不是穷举法预置的，也就是页面只会生成需要的样式，不会生成多余的样式，重用的样式只会生成一次，能达到复用的目的，这些对于使用者来说是无感的。

使用者只需要按照格式来命名类名即可。

我们秉持缩写的原则，即属性名的首字母缩写，然后再加上对应的值的首字母缩写，把他们用横线连接起来。

举几个例子：示例是表示它们可能的用法，各种用法之间可以自由组合。

1. 宽度width

宽度有几种指定方式：固定值、百分比值、全局值等。

其中w是width的缩写，vw表示用视口宽度。

• w-50: 表示宽度为50px，等同于width: 50px;。

• w_50: 表示宽度为50%，等同于width: 50%;，百分比的值使用下划线。

• vw_50: 表示宽度为视口的50%，等同于width: 50vw;。

• minw-50: 表示最小宽度为50px，等同于min-width: 50px;，由于min和max首字母都是m，并且他们都起到形容修饰的作用，因此对这种直接写全，同理最小高度就是minh。

2. 外边距margin

外边距也有几种指定方式：固定值、百分比值、全局值等。

其中m是margin的缩写，ml是margin-left的缩写，mx是margin-left和margin-right的缩写，x表示水平方向，同样my表示的是上下外边距。

• m-10: 表示外边距10px，等同于margin: 10px;。

• ml-10: 表示左外边距为10px，等同于margin-left: 10px;。

• mt--10: 表示上外边距为-10px，等同于margin-top: -10px;。

• mx-10: 表示左右外边距为10px，等同于margin-left: 10px;margin-right: 10px;。

3. 定位position

其中p是positon的缩写，r是属性值relative的缩写。

• p-r: 表示相对定位，等同于positon: relative;。

• p-a: 表示绝对定位，等同于positon: absolute;。

4. 显示类型display

其中d是display的缩写，b是属性值block的缩写。

• d-i: 表示行内，等同于display: inline;。

• d-ib: 表示行内块，等同于display: inline-block;。

• d-n: 表示隐藏，等同于display: none;。

• d-f: 表示弹性布局，等同于display: flex;。

5. 鼠标形状cursor

其中c是cursor的缩写。

• c-p: 表示手形状，等同于cursor: pointer;。

• c-na: 表示不允许操作，等同于cursor: not-allowed;。

6. 颜色color

其中c是color的缩写，不用担心跟鼠标形状cursor会冲突，因为它们的值格式不同。

• c-red: 表示红色，等同于color: red;，可以直接指定颜色单词。

• c-ff0000: 表示红色，等同于color: #ff0000;，也可是指定rgb形式的颜色值。

7. 背景色background-color

其中bgc是background-color的缩写，这里没用bc的原因是因为我们熟悉背景的英文缩写就是bg，因此这里沿用下来，也让人容易理解，而且也是为了避免与border-color相冲突。

• bgc-123456: 表示背景色为#123456，等同于background-color: #123465;。

8. 字体大小font-size

其中fs是font-size的缩写。

• fs-18: 表示字体大小为18px，等同于font-size: 18px;。

9. 边框border

其中b是border的缩写，后面的值分为三个，第一个表示边框宽度，第二个表示线的类型，第三个表示线的颜色，颜色可以是英文单词或者十六进制或者rgb等。

• b-n: 表示不显示边框，等同于border: none;。

• b-1-solid-red: 表示1px的红色实线边框，等同于border: 1px solid red;。

• b-1-solid-ff0000: 表示1px的红色实线边框，等同于border: 1px solid #ff0000;。

10. 对齐方式text-align

其中ta是text-align的缩写。

• ta-c: 表示居中对齐，等同于text-align: center;。

等等等等，其他的类名也都遵守上面的格式。不再一一列举。