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>元素。
注意:特殊auto值允许浏览器为指定元素自动计算宽度。的百分比(%)值是指该元素的包含块的宽度。
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属性指定的值大于属性的值,则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属性结合使用,以控制有关元素的高度范围。
注意:该min-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指定的属性值大于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属性结合使用,以产生有关元素的宽度范围。
注意:该min-width属性通常用于确保元素即使没有内容也至少具有最小宽度。但是,如果元素的内容超过设置的最小宽度,则将允许元素正常增长。