CSS Dimension(尺寸)

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

CSS尺寸属性

该CSS提供了几个属性，如width，height，max-width和max-height等，可以让您Box(盒子)的尺寸。下一节将介绍如何使用这些属性来创建更好的网页布局。

宽度(Width)和高度(Height)属性

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

width和height属性可以采用长度值（如px，pt，em等），一个百分比，或关键字auto。不允许负长度值。

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

此样式规则将300像素的固定宽度和200像素的高度分配给<div>元素。

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 最小高度属性

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

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

div {
    height: 200px;
    min-height: 300px;
}

该min-height属性通常与该max-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 最小宽度属性

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

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

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

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