CSS 维度

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

CSS 维度属性

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

宽度和高度属性

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

widthheight 特性可用长度值(pxptem 等)、百分比或 关键字 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 属性通常用于确保元素至少具有最小宽度,即使没有内容也是如此。但是,如果元素的内容超过设置的最小宽度,则允许元素正常延伸。