Width & Height 宽度和高度
用户可通过_w-*和_h-*样式类独立使用宽度和高度;宽度和高度是以input高度作为基本单位的,例如_w-x1表示38px,_w-x6表示38*6px;特别提供了neat(同input宽度),half(50%)和full(100%)三个尺寸。
前言
在网页中,有些元素的宽度是未定义状态,需要手动设置宽度,未定义宽度的元素包括:
- 原本就是行内元素,包括
display:inline/inline-flex/inline-block
类型的元素,这些元素的宽度依赖于内容的多少; - 在弹性布局中,由于元素的嵌套关系,一些本来是block或flex类型的元素将自动转为行内元素,这些元素的宽度也需要手动进行设置;
- 绝对定位中(
position:fixed/absolute
)的块元素将失去原本100%的宽度,此时需要手动设置他们的宽度; - 块元素在一行多列布局中,由于其自身100%宽度,无法给其他元素留出空白,所以也需要手动设置其宽度;
宽度样式
本框架内置了一套宽度样式,这套宽度样式自动使用了box-sizing:border-box样式,他分两个体系:
- 以表单域元素的高度(3.8rem/38px)为基准的,获取绝对宽度;
- 以百分比为单位获取相对宽度;
具体说明如下:
样式名 | 说明 |
---|---|
_w-x1 | 宽3.8rem(38px) |
_w-x2 | 宽3.8rem(38px)*2 |
_w-x3 | 宽3.8rem(38px)*3 |
_w-x4 | 宽3.8rem(38px)*4 |
_w-x5 | 宽3.8rem(38px)*5 |
_w-x6 | 宽3.8rem(38px)*6 |
_w-x7 | 宽3.8rem(38px)*7 |
_w-x8 | 宽3.8rem(38px)*8 |
_w-x9 | 宽3.8rem(38px)*9 |
_w-x10 | 宽3.8rem(38px)*10 |
_w-neat | 宽3.8rem(38px)*10 ,与表单域input宽度一致 |
_w-half | 宽50% |
_w-full | 宽100% |
- 输出
- HTML
高度样式
同宽度一样,高度样式类如下:
样式名 | 说明 |
---|---|
_h-x1 | 高3.8rem(38px) |
_h-x2 | 高3.8rem(38px)*2 |
_h-x3 | 高3.8rem(38px)*3 |
_h-x4 | 高3.8rem(38px)*4 |
_h-x5 | 高3.8rem(38px)*5 |
_h-x6 | 高3.8rem(38px)*6 |
_h-x7 | 高3.8rem(38px)*7 |
_h-x8 | 高3.8rem(38px)*8 |
_h-x9 | 高3.8rem(38px)*9 |
_h-x10 | 高3.8rem(38px)*10 |
_h-neat | 高3.8rem(38px) ,与表单域input高度一致 |
_h-half | 高50% |
_h-full | 高100% |
- 输出
- HTML