css维度属性 – CSS高级教程 css维度属性|CSS

上一章CSS高级教程请查看：css内容溢出处理
本章介绍用于控制元素的高度和宽度的CSS维度属性。
CSS维度属性CSS提供了几个属性，如width, height, max-width和max-height等，允许你控制一个框的尺寸，下一节将介绍如何使用这些属性来创建更好的web页面布局。
宽度和高度属性width和height属性定义元素内容区域的宽度和高度。此宽度和高度不包括划片、边框或边距。查看CSS盒子模型，了解如何计算有效宽度和高度。
【css维度属性 – 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。