Logo Windi CSS

Sizing

Width

用于控制元素宽度的工具类。

auto
px
full
screen
min
max
prose
xs
sm
md
lg
xl
2xl
3xl
screen-sm
screen-md
screen-lg
screen-xl
screen-2xl
0
1
1.5
2
4
8
10
12
14
18
20
24
1/2
1/3
3/5
11/12
4rem
60px
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      width: {
        half: '50%',
      },
    },
  },
}

Min-Width 
用于控制元素最小宽度的工具类。
none
px
full
screen
min
max
prose
xs
sm
md
lg
xl
2xl
3xl
screen-sm
screen-md
screen-lg
screen-xl
screen-2xl
0
1
1.5
2
4
8
10
12
14
18
20
24
1/2
1/3
3/5
11/12
4rem
60px
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    minWidth: {
      half: '50%',
      full: '100%',
    },
  },
}

Max-Width 
用于控制元素最大宽度的工具类。
none
px
full
screen
min
max
prose
xs
sm
md
lg
xl
2xl
3xl
screen-sm
screen-md
screen-lg
screen-xl
screen-2xl
0
1
1.5
2
4
8
10
12
14
18
20
24
1/2
1/3
3/5
11/12
4rem
60px
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    maxWidth: {
      '1/4': '25%',
      '1/2': '50%',
      '3/4': '75%',
    },
  },
}

Height 
用于控制元素高度的工具类。
auto
px
full
screen
min
max
prose
xs
sm
md
lg
xl
2xl
3xl
screen-sm
screen-md
screen-lg
screen-xl
screen-2xl
0
1
1.5
2
4
8
10
12
14
18
20
24
1/2
1/3
3/5
11/12
4rem
60px
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    height: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Min-Height 
用于控制元素最小高度的工具类。
none
px
full
screen
min
max
prose
xs
sm
md
lg
xl
2xl
3xl
screen-sm
screen-md
screen-lg
screen-xl
screen-2xl
0
1
1.5
2
4
8
10
12
14
18
20
24
1/2
1/3
3/5
11/12
4rem
60px
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    minHeight: {
      '0': '0',
      '1/4': '25%',
      '1/2': '50%',
      '3/4': '75%',
      'full': '100%',
    },
  },
}

Max-Height 
用于控制元素最大高度的工具类。
none
px
full
screen
min
max
prose
xs
sm
md
lg
xl
2xl
3xl
screen-sm
screen-md
screen-lg
screen-xl
screen-2xl
0
1
1.5
2
4
8
10
12
14
18
20
24
1/2
1/3
3/5
11/12
4rem
60px
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    maxHeight: {
      '0': '0',
      '1/4': '25%',
      '1/2': '50%',
      '3/4': '75%',
      'full': '100%',
    },
  },
}

Box Sizing 
用于控制浏览器如何计算元素尺寸的工具类。
  • 使用 box-border 用于告知浏览器当你设置元素高度或宽度时，包含元素边框和内边距，这意味着一个 100px × 100px 元素带有 2px 的边框和 4px 的内边距将被渲染为 100px × 100px，它的内部内容区域为 88px × 88px。Windi 将在预设样式中设置默认值。
  • 使用 box-content 用于告知浏览器在元素的添加边框和内边距到顶部高度，这意味着一个 100px × 100px 元素带有 2px 的边框和 4px 的内边距将被渲染成 112px × 112px，它的内部内容区域为 100px × 100px。
border
content
CSS