CSS 基础教程

CSS 盒子模型

CSS3基础教程

CSS 参考手册

CSS @规则(RULES)

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>元素。

注意:特殊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属性通常用于确保元素即使没有内容也至少具有最小宽度。但是,如果元素的内容超过设置的最小宽度,则将允许元素正常增长。