CSS 维度

CSS 维度属性，用于控制元素的高度和宽度。

CSS 维度属性

CSS 提供了几个属性，如 width ， height ， max-width 和 max-height 等，可以让你控制箱的尺寸。以下部分将介绍如何使用这些属性创建更好的网页布局。

宽度和高度属性

width 和 height 属性定义一个元素的内容区域的宽度和高度。此宽度和高度不包括填充、边框或边距。请参阅 CSS 框模型 以了解如何计算有效宽度和高度。

width 和 height 特性可用长度值（px ， pt ， em 等）、百分比或 关键字 auto。它们不允许负长度值。

div {
    width: 300px;
    height: 200px;
}

此样式规则为 <div> 元素指定 300 像素的固定宽度和 200 像素的高度。

注意： 特殊 auto 值允许浏览器自动计算指定元素的宽度。百分比（%） 值是跟该元素的包含块的宽度相对而言。

最大高度属性 max-height

max-height 属性允许你指定框的最大内容高度。此最大高度不包括填充，边框或边距。

已应用 max-height 元素永远不会高于指定的值，即使该 height 属性设置为更大的值。例如，如果 height 设置为 200px 并且 max-height 设置为 100px，则元素的实际高度为 100px。

div {
    height: 200px;
    max-height: 100px;
}

该 max-height 属性通常与 min-height 属性一并使用，以产生有关元素的高度范围。

注意： 此规则有一个例外 - 如果 min-height 指定的属性值大于 property 的值，则 max-height 在这种情况下，该 min-height 值实际上是应用的值。

最小高度属性 min-height

min-height 属性允许你指定块的最小内容高度。此最小高度不包括填充，边框或边距。

应用的元素 min-height 永远不会小于指定的最小高度。例如，如果 height 设置为 200px，并且 min-height 设置为 300px，则元素的实际高度为 300px。

该 min-height 属性通常与 max-height 属性一并使用，以产生有关元素的高度范围。

注意： 该 min-height 属性通常用于确保元素至少具有最小高度，即使没有内容也是如此。但是，如果内容超过设置的最小高度，则允许元素正常延伸。

最大宽度属性 max-width

max-width 属性允许你指定块的最大内容宽度。此最大宽度不包括填充，边框或边距。

max-width 即使将 width 属性设置为更大的值，应用 a 的元素也不会宽于指定的值。例如，如果 width 设置为 300px 且 max-width 设置为 200px，则元素的实际宽度将为 200px。

div {
    width: 300px;
    max-width: 200px;
}

该 max-width 属性通常与 min-width 属性一起使用，以产生相关元素的宽度范围。

注意： 此规则有例外; 如果 min-width 使用大于 property 的值指定 max-width 属性，则在这种情况下，该 min-width 值实际上将是应用的值。

最小宽度属性 min-width

min-width 属性允许你指定块的最小内容宽度。此最小宽度不包括填充，边框或边距。

应用的元素 min-width 永远不会比指定的最小宽度窄。例如，如果将 width 其设置为 300px 且 min-width 设置为 400px，则元素的实际宽度为 400px。

div {
    width: 300px;
    min-width: 400px;
}

该 min-width 属性通常与 max-width 属性一起使用，以产生相关元素的宽度范围。

注意： 该 min-width 属性通常用于确保元素至少具有最小宽度，即使没有内容也是如此。但是，如果元素的内容超过设置的最小宽度，则允许元素正常延伸。