css大盒子尺寸如何设置,CSS Dimension(尺寸)

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像素的高度分配给

元素。

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