固有尺寸

在 CSS 中，元素的固有尺寸是指基于其内容的尺寸，不考虑它所在的上下文影响。例如，CSS 盒模型属性应用的尺寸。元素的固有尺寸由其 min-content 和 max-content 尺寸表示。

行级元素的尺寸是固有的：尺寸和盒属性，包括 height、width、block-size、inline-size、padding-block 和 margin-block 都对其没有影响（尽管 margin-inline 和 padding-inline 有影响）。

例如，行级元素 <span> 的最小固有尺寸是在不应用其他 CSS 盒属性的情况下，它在一个行向尺寸为 0px 的容器内浮动时的最小尺寸。最大的固有尺寸则相反，是指其容器的行向尺寸为无限时的大小。

对于图像，固有尺寸与文本的含义相同——在不应用任何 CSS 来改变渲染的情况下，图像显示的尺寸。

像素密度和分辨率影响固有尺寸。默认情况下，假定图像具有“1x”像素密度（1 设备像素=1 CSS 像素），此时固有尺寸只是像素高度和宽度。图像的固有尺寸和分辨率可以在其 EXIF 数据中明确指定。图像的像素密度也可以使用 srcset 属性设置。请注意，如果同时使用两种机制，则 srcset 值覆盖 EXIF 值。

固有尺寸及其计算方式在 CSS 尺寸模块中定义。

最小固有尺寸

要根据元素的最小固有尺寸进行设置，可以将 inline-size（或在横向书写模式中使用的 width）设置为 min-content。这将元素设置为文本在行内方向尽可能小地换行而不溢出的尺寸，并尽可能多地进行软换行。对于包含一串文本的盒子，最小固有尺寸由最长的单词决定。

css
p {
  inline-size: min-content;
  background-color: palegoldenrod;
}

最大固有尺寸

最大固有尺寸则相反。如果容器的行内尺寸是无限的，元素的尺寸是多大？文本内容将尽可能显示宽，不进行软换行，即使溢出容器。关键字值 max-content 设置了这种行为。

css
p {
  width: max-content;
  background-color: palegoldenrod;
}

非固有尺寸

非固有尺寸（extrinsic size）与固有尺寸相反，是基于元素的上下文，而不考虑其内容的尺寸。非固有尺寸由盒模型属性值决定。在非固有尺寸中，百分比指定了盒子相对于其包含块的大小。

参见