css中width的属性值

2 阅读1分钟

CSS中width属性的值类型包括:

关键字值

  • auto - 自动计算宽度(默认值)
  • inherit - 继承父元素
  • initial - 初始值
  • unset - 重置为继承或初始值
  • revert - 回滚到用户代理样式表
  • max-content - 内容最大宽度
  • min-content - 内容最小宽度
  • fit-content - 适合内容宽度
  • stretch - 拉伸填充容器

长度值

  • 100% - 相对于父元素宽度的百分比
  • 50vw - 相对于视口宽度的百分比
  • 200px - 像素值
  • 10em - 相对于当前字体大小
  • 5rem - 相对于根元素字体大小
  • 20ch - 字符单位
  • 100vh - 视口高度单位

函数值

  • calc(100% - 20px) - 计算表达式
  • min(200px, 50%) - 取最小值
  • max(100px, 20vw) - 取最大值
  • clamp(200px, 50%, 400px) - 夹在最小值和最大值之间

特殊值

  • 0 - 零宽度
  • none - 在某些上下文中等同于auto