自动 | auto (Basic Box Model) - CSS 中文开发手册 - Break易站

??CSS 中文开发手册

自动 | auto (Basic Box Model) - CSS 中文开发手册

width 属性指定了元素内容区的宽度。默认情况下，该属性定义了内容区域的宽度。如果box-sizing设置为border-box，则确定边框区域的宽度。

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

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

/* Keyword values */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

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

在min-width和max-width属性覆盖width。

语法

width属性被指定为：

以下关键字值之一：available，min-content，max-content，fit-content，auto。<length>或<percentage>。这可以选择跟随以下关键字之一：border-box，content-box。

值

<length>可能的长度单位见<length>.

<percentage>指定为包含块宽度的<percentage>.

border-box如出现, 之前的<length>或<percentage>应用到元素的边框盒子.

content-box如出现, 之前的<length>或<percentage>应用到元素的内容盒子.

auto浏览器将会为指定的元素计算并选择一个宽度.

fill使用?fill-available?行内尺寸或者?fill-available?块级尺寸其中一种来作为合适的书写模式。max-content固有的首选宽度.

min-content固有的最小宽度.

available包含块的宽度减去水平 margin, border 和 padding.

fit-content以下两种情况下的较大值:

固有的最小宽度

固有首选宽度（max-content）和可用宽度（available）的较小值

正式语法

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

示例

默认宽度

p.goldie {
  background: gold;
}

<p class="goldie">The Mozilla community produces a lot of great software.</p>

px 和 em