#width

#介绍

指定了一个元件的宽度。 默认情况下，这个属性决定的是边框区域（border area）的宽度，但如果将该元件的 box-sizing 设置为 content-box，就转而设置内容区域（content area）的宽度。

min-width 和 max-width 属性的优先级高于 width。

#使用示例

css-apisrc/width/App.tsx

Code

预览

#语法

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

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

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

#取值

• auto

  默认值。lynx 根据一些条件决定具体值。

• <length>

  <length> 将宽度定义为一个绝对值。

• <percentage>

  使用外层元件的容纳区块宽度（the containing block's width）的百分比定义宽度。

• max-content

元件内容固有的（intrinsic）合适宽度。

• fit-content

  在内容最大宽度及 fit-content 定义值中取最小值。

#形式定义

#与 Web 的区别

mdn: width

• width 默认决定的是边框区域（border area）的宽度，而 Web 是 content area；
• 不支持 min-content；

#兼容性