css维度属性 – CSS高级教程

上一章CSS高级教程请查看：css内容溢出处理

本章介绍用于控制元素的高度和宽度的CSS维度属性。

CSS维度属性

CSS提供了几个属性，如width, height, max-width和max-height等，允许你控制一个框的尺寸，下一节将介绍如何使用这些属性来创建更好的web页面布局。

宽度和高度属性

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属性被设置为更大的值也是如此。例如，如果高度设置为200px，最大高度设置为100px，那么元素的实际高度就是100px。

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

max-height属性通常与min-height属性一起使用，以生成相关元素的高度范围。

注意：这个规则有一个例外——如果最小高度属性指定的值大于max-height属性的值，在这种情况下，最小高度值实际上就是应用的值。

最小高度属性

min-height最小高度属性允许你指定块的最小内容高度，这个最小高度不包括划片、边框或边距。

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

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

最小高度属性通常与最大高度属性一起使用，以生成相关元素的高度范围。

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

最大宽度属性

max-width属性允许你指定块的最大内容宽度，这个最大宽度不包括划片、边框或边距。

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

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

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

注意:这个规则有一个例外;如果指定的最小宽度属性的值大于最大宽度属性的值，在本例中，最小宽度值实际上就是应用的值。

min-width属性

最小宽度属性允许你指定块的最小内容宽度，这个最小宽度不包括划片、边框或边距。

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

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

最小宽度属性通常与最大宽度属性一起使用，以生成相关元素的宽度范围。

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