Width & height元素宽度和高度

用户可通过_w-*和_h-*样式类独立使用宽度和高度;宽度和高度是以input高度作为基本单位的,例如_w-x1表示38px,_w-6表示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-0 宽0px
_w-1 宽3.8rem(38px)
_w-2 宽3.8rem(38px)*2
_w-3 宽3.8rem(38px)*3
_w-4 宽3.8rem(38px)*4
_w-5 宽3.8rem(38px)*5
_w-6 宽3.8rem(38px)*6
_w-7 宽3.8rem(38px)*7
_w-8 宽3.8rem(38px)*8
_w-9 宽3.8rem(38px)*9
_w-10 宽3.8rem(38px)*10
_w-neat 宽3.8rem(38px)*10 ,与表单域input宽度一致
_w-half 宽50%
_w-full 宽100%
_w-auto auto
  • 输出
  • HTML
  •                 
                    
                

高度样式

同宽度一样,高度样式类如下:

样式名 说明
_h-0 高0px
_h-1 高3.8rem(38px)
_h-2 高3.8rem(38px)*2
_h-3 高3.8rem(38px)*3
_h-4 高3.8rem(38px)*4
_h-5 高3.8rem(38px)*5
_h-6 高3.8rem(38px)*6
_h-7 高3.8rem(38px)*7
_h-8 高3.8rem(38px)*8
_h-9 高3.8rem(38px)*9
_h-10 高3.8rem(38px)*10
_h-neat 高3.8rem(38px) ,与表单域input高度一致
_h-half 高50%
_h-full 高100%
_h-auto auto
  • 输出
  • HTML
  •