YUS框架之us指令
众所周知的是，页面的样式渲染是由CSS来完成的。例如：width:100px;代表元素宽度为100像素；height:50px;代表元素高度为50像素；font-size:15px;代表元素中字体大小为15像素；下面一段就是标准的CSS语句：
.css1 { width:100px; height:100px; line-height:100px; background:#ff0; }
上面的CSS代码，代表一个宽、高、行高为100px，并且背景色为黄色的方框元素，那么，用Yus如何来实现上述CSS代码的功能呢，先直接给出例子：
<div class="us-w-100 us-h-100 us-lh-100 uc-bg-ff0"></div>
解释如下：
us-w-100，代表宽度为100像素，即：width:100px;
us-h-100，代表高度为100像素，即：height:100px;
us-lh-100，代表行高为100像素，即：line-height:100px;
us-bg-ff0，代表背景色为#ff0黄色，即：background:#ff0;
由于在Yus中，数值相同的情况下，中间的属性可以用逗号分隔连续书写，所以上边的代码可以精简为：
<div class="us-w,h,lh-100 uc-bg-ff0"></div>
US指令说明
| 项目 | 描述 |
| 语法 | 指令由三部分部分，第一部分us声明尺寸指令，第二部分为参数属性缩写，第三部分为数值。 示例：us-属性参数-数值。 |
| 属性参数 | 是CSS属性的缩略写法，如w代表width，m代表margin，详情参见下列《属性参数表》 |
| 数值 | 数值为正数的情况下直接书写，数值为负数的情况下，用ms或^符号来代替。 示例：us-t-ms100或us-t-^100 |
| n | 向下延伸层级，例如n为3时，影响第三代子元素，即children().children().children() |
| 单位 | 数值如果不带单位的情况下，默认使用px像素单位，us指令支持的尺寸单位包括px，pt，em，cm，vw，vh，vmin，vmax等，百分比可以使用%符号或pr |
属性参数表
yus将css常用属性简单的划分为两大类，即尺寸、颜色。yus认为所有px，pt，em，cm，vw，vh或者百分比符号%，都是尺寸的计量单位，可以使用us命令进行渲染，下表列出所有尺寸单位涉及到的属性参数：
| 属性参数 | 示例 | CSS写法 | 功能描述 |
| w | us-w-500 | {width:500px;} | 元素宽度，如果作用在<span>或<li>等标签上，需要首先添加block或inline样式，而这些class样式是yus系统自带的《内嵌样式》，直接书写调用即可。 例如： <span class="block us-w-300">或<li class="inline us-w-300"> |
| h | us-h-20vh | {height:20vh;} | 元素高度 说明一下vw、vh，vmin，vmax几个尺寸单位，1vw等于视窗宽度的1%，1vh等于视窗高度的1%，vmax视窗宽度或高度相对大的，vmin视窗宽度或高度相对小的。 |
| lh | us-lh-30 | {line-height:30px;} | 文本行高 |
| fs | us-fs-15 | {font-size:15px;} | 文字大小 |
| t | us-t-10vh | {top:10vh;} | 上方距离，设置顶端距离的元素，必须同时设置position位置属性，使用内嵌class样式自带的poa、por、pof都可以，参考 《内嵌样式》。 |
| r | us-r-10 | {right:10px;} | 右侧距离，需设置position位置属性。 |
| b | us-b-10 | {bottom:10px;} | 下方距离，需设置position位置属性。 |
| l | us-l-10 | {left:10px;} | 左侧距离，需设置position位置属性。 |
| m | us-m-2em | {margin:2em;} | 元素外边距，此示例代表元素外边距为2个字符。 CSS中margin属性可以这些书写：{margin:2cm 4cm 3cm 4cm;}或{margin:10px 5px;}。Yus同样也支持这种书写方式，只是在格式上稍有区别，同时对us-，uc-指令不再敏感。 例如： us-m-[2cm 4cm 3cm 4cm]或us-m-[10px 5px] |
| mt | us-mt-8 | {margin-top:8px;} | 元素上方外边距。 |
| mr | us-mr-8 | {margin-right:8px;} | 元素右侧外边距。 |
| mb | us-mb-8 | {margin-bottom:8px;} | 元素下方外边距。 |
| ml | us-ml-8 | {margin-left:8px;} | 元素左侧外边距。 |
| p | us-p-8px | {padding:8px;} | 元素内边距。 |
| pt | us-pt-8 | {padding-top:8px;} | 元素上方内边距。 |
| pr | us-pr-8 | {padding-right:8px;} | 元素右侧内边距。 |
| pb | us-pb-8 | {padding-bottom:8px;} | 元素下方内边距。 |
| pl | us-pl-8 | {padding-left:8px;} | 元素左侧内边距。 |
| bw | us-bw-1 | {border-width:1px;} | 边框宽度，设置元素边框宽度，必须同时设置元素边框的线型，例如：solid或dotted，内置线型class样式参见 《内嵌样式》。 |
| bt | us-bt-1 | {border-top-width:1px;} | 边框上方宽度。 |
| br | us-br-1 | {border-right-width:1px;} | 边框右侧宽度。 |
| bb | us-bb-1 | {border-bottom-width:1px;} | 边框下方宽度。 |
| bl | us-bl-1 | {border-left-width:1px;} | 边框右侧宽度。 |
| ra | us-ra-5 | {border-radius:5px;} | 元素边框圆角。 |
| ls | us-ls-5 | {letter-spacing:5px;} | 元素字母间距。 |
| ti | us-ti-2em | {text-indent:2em;} | 段落首行文字缩进，例子中为缩进两个字符。 |
| ws | us-ws-5 | {word-spacing:5px;} | 文字间距。 |
| ow | us-ow-2 | {outline-width:2px;} | 元素周围轮廓线的宽度。 |
| oo | us-oo-5 | {outline-offset:5px;} | 轮廓线偏移量。 |
| xw | us-xw-500 | {max-width:500px;} | 设置最大宽度。 |
| nw | us-nw-500 | {min-width:500px;} | 设置最小宽度。 |
| xh | us-xh-500 | {max-height:500px;} | 设置最大高度。 |
| nh | us-nh-500 | {min-height:500px;} | 设置最小高度。 |
| va | us-va-5 | {vertical-align:5px;} | 设置元素的垂直对齐方式，注意此处只可以使用数值，如top、middle等值的写法，下面另外说明。 |
| cp | us-cp-5 | {grid-column-gap:5px;} | 定义网格布局中，列间隙的大小。 |
| rp | us-rp-5 | {grid-row-gap:5px;} | 定义网格布局中，行间隙的大小。 |
| gap | us-gap-5 | {grid-gap:5px;} | 定义网格布局中，行与列间隙的大小。 |
| z | us-z-10 | {z-index:10;} | 设置元素的堆叠顺序。 |
| fw | us-fw-700 | {font-weight:700;} | 设置文本的粗细，其中数值700等价于bold。 |
| opa | us-opa-0.5 | {opacity:0.5;} | 设置元素的不透明级别。 |
| o | us-o-5 | {order:5;} | 设置弹性盒对象元素的顺序。 |
| g | us-g-3 | {flex-grow:3;} | 设置或检索弹性盒子的扩展比率。 |
| s | us-s-2 | {flex-shrink:2;} | 设置flex元素的收缩规则。 |
| fb | us-fb-80 | {flex-basis:80px;} | 设置弹性项目的初始长度。 |
| f | us-f-1 | {flex:1;} | 设置或检索弹性盒模型对象的子元素如何分配空间。 |
