Width & Height 宽度和高度

用户可通过_w-*和_h-*样式类独立使用宽度和高度;宽度和高度是以input高度作为基本单位的,例如_w-x1表示38px,_w-x6表示38*6px;特别提供了neat(同input宽度),half(50%)和full(100%)三个尺寸。

前言

在网页中,有些元素的宽度是未定义状态,需要手动设置宽度,未定义宽度的元素包括:

  1. 原本就是行内元素,包括display:inline/inline-flex/inline-block类型的元素,这些元素的宽度依赖于内容的多少;
  2. 在弹性布局中,由于元素的嵌套关系,一些本来是block或flex类型的元素将自动转为行内元素,这些元素的宽度也需要手动进行设置;
  3. 绝对定位中(position:fixed/absolute)的块元素将失去原本100%的宽度,此时需要手动设置他们的宽度;
  4. 块元素在一行多列布局中,由于其自身100%宽度,无法给其他元素留出空白,所以也需要手动设置其宽度;

宽度样式

本框架内置了一套宽度样式,这套宽度样式自动使用了box-sizing:border-box样式,他分两个体系:

  1. 以表单域元素的高度(3.8rem/38px)为基准的,获取绝对宽度;
  2. 以百分比为单位获取相对宽度;

具体说明如下:

样式名 说明
_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
  •