上一章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;
}
此样式规则为
元素分配固定的宽度300像素和高度200像素。
注意:特殊的auto值允许浏览器自动计算指定元素的宽度,百分比(%)值指的是元素所在块的宽度。
max-height属性
max-height属性允许你指定框的最大内容高度,这个最大高度不包括划片、边框或边距。
应用了max-height的元素将不会比指定的值更高,即使height属性被设置为更大的值也是如此。例如,如果高度设置为200px,最大高度设置为100px,那么元素的实际高度就是100px。
div {
height: 200px;
max-height: 100px;
}
max-height属性通常与min-height属性一起使用,以生成相关元素的高度范围。