CSS 尺寸
在本教程中，您将学习如何使用 CSS 设置元素的宽度和高度。
设置元素尺寸
CSS 有几个尺寸属性，例如 width, height, max-width, min-width, max-height, 和 min-height 允许您控制元素的宽度和高度。 以下部分描述了如何使用这些属性来创建更好的网页布局。
设置宽度和高度
width 和 height 属性定义元素内容区域的宽度和高度。
此宽度和高度不包括填充、边框或边距。 请参阅 CSS 框模型 了解如何计算元素框的有效宽度和高度。
让我们试试下面的例子，看看它是如何工作的：
div {
width: 300px;
height: 200px;
}上述样式规则为 <div> 元素分配了 300 像素的固定宽度和 200 像素的高度。
width 和 height 属性可以采用以下值：
- length - 以 px、em、rem、pt、cm 等为单位指定宽度。
- % - 指定包含元素宽度的百分比 (%) 宽度。
- auto - 浏览器计算元素的合适宽度。
- initial - 将宽度和高度设置为其默认值，即
auto。 - inherit - 指定宽度应该从父元素继承。
您不能为宽度和高度属性指定负值。
提示： 通常当您创建块元素时，例如 <div>, <p> 等，浏览器会自动将其宽度设置为可用宽度的 100%，并将高度设置为显示所有内容所需的任何值。 除非必要，否则应避免设置固定的宽度和高度。
设置最大宽度和高度t
您可以使用 max-width 和 max-height 属性来指定内容区域的最大宽度和高度。 此最大宽度和高度不包括填充、边框或边距。
一个元素的宽度不能超过 max-width 值，即使 width 属性值设置为更大。 例如，如果 width 设置为 300px，max-width 设置为 200px，则元素的实际宽度将为 200px。 让我们看一个例子：
div {
width: 300px;
max-width: 200px;
}注意： 如果指定的 min-width 属性的值大于 max-width 属性的值，在这种情况下，min-width 值实际上就是应用的值。
同样，应用了 max-height 的元素永远不会高于指定的值，即使 height 属性设置为更大。 例如，如果 height 设置为 200px，max-height 设置为 100px，则元素的实际高度将为 100px。
div {
height: 200px;
max-height: 100px;
}注意： 如果 min-height 属性指定的值大于 max-height 属性的值，在这种情况下 min-height 值实际上将是应用的值。
设置最小宽度和高度
您可以使用 min-width 和 min-height 属性指定内容区域的最小宽度和高度。 此最小宽度和高度不包括填充、边框或边距。
一个元素不能比 min-width 值更窄，即使 width 属性值被设置为更小的值。 例如，如果 width 设置为 300px，min-width 设置为 400px，则元素的实际宽度将为 400px。 让我们看看它实际上是如何工作的：
div {
width: 200px;
min-width: 300px;
}注意： min-width 属性通常用于确保元素至少具有最小宽度，即使没有内容存在。 但是，如果元素的内容超过设置的最小宽度，则元素将被允许正常增长。
类似地，应用 min-height 的元素永远不会小于指定的值，即使 height 属性设置为更小。 例如，如果 height 设置为 200px，min-height 设置为 300px，则元素的实际高度将为 300px。
div {
height: 100px;
min-height: 200px;
}注意： min-height 属性通常用于确保元素至少具有最小高度，即使没有内容存在。 但是，如果内容超过设置的最小高度，则元素将被允许正常增长。
设置宽度和高度范围
min-width 和 min-height 属性通常与 max-width 和 max-height 属性结合使用，以生成元素的宽度和高度范围。
这对于创建灵活的设计非常有用。 在下面的示例中，<div> 元素的最小宽度为 300 像素，并且它可以水平拉伸到最大 500 像素。
div {
min-width: 300px;
max-width: 500px;
}同样，您可以为元素定义高度范围。 在下面的示例中，<div> 元素的最小高度为 300 像素，并且它可以垂直拉伸到最大 500 像素。
div {
min-height: 300px;
max-height: 500px;
}