width

width 属性用于设置元素的宽度。默认设置内容区域的宽度。但如果box-sizing属性被设置为border-box，就转而设置边框区域的宽度。

示例

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;

/* Global values */
width: inherit;
width: initial;
width: unset;

浏览器支持

浏览器都支持width

语法

width:auto| <length>| <percentage>| min-content| max-content| fit-content()

width 属性也指定为：

• 下面关键字值之一：min-content，max-content，fit-content，auto。
• 一个长度值或者百分比值。

取值：

• auto：浏览器将会为指定的元素计算并选择一个宽度。
• <length>：使用绝对值定义宽度。参见<length>。
• <percentage>：使用外层元素的容纳区块宽度（the containing block's width）的百分比定义宽度。参见<percentage>。
• min-content：元素内容固有的（intrinsic）合适宽度。还处于实验阶段
• max-content：元素内容固有的最小宽度还处于实验阶段。
• fit-content()：还处于实验阶段.取以下两种值中的较大值:
  • 固有的最小宽度
  • 固有首选宽度（max-content）和可用宽度（available）两者中的较小值
  • 可表示为：min(max-content, max(min-content,))。

实例

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit 使用了非标准的名称 */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}