DevShelf

Appearance

width ​

描述 ​

width 属性指定元素内容区域的宽度。内容区域位于元素的内边距、边框和边距内。

效果展示 ​

语法 ​

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

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

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

值 ​

  • <length> 将宽度定义为距离值。
  • <percentage> 将宽度定义为包含块宽度的百分比。
  • auto 浏览器将计算并选择指定元素的宽度。
  • max-content
  • min-content
  • fit-content(<length-percentage>) 使用 fit-content 公式，并将可用空间替换为指定参数，即 min(max-content, max(min-content, <length-percentage>)) 。
  • available 包含块的宽度减去水平边距、边框和内边距
  • border-box 如果使用 border-box，则定义的长度或百分比将应用于元素的边框。
  • content-box 如果使用内容框，则定义的长度或百分比将应用于元素的内容框。