CSS 尺寸

概览

CSS 尺寸属性允许你控制元素的高度（height）和宽度（width）。

属性	描述
height	设置元素的高度。
width	设置元素的宽度。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。

我们一般所指的高度和宽度是指下图中红线标示的区域。

IE 5.X 和 6 这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。简单知道就行了。

height

height 属性设置元素的高度。行内非替换元素（如：<a>,<span>,影响他们高度的是line-height属性）会忽略这个属性。

可选的值：

• auto 默认。浏览器会计算出实际的高度。

• length 使用 px, cm, mm, em 等单位定义高度。

• % 基于包含它的块级对象的百分比定义高度。

div.normal {
    height: auto
}

div.big {
    height: 160px
}

div.small {
    height: 30px
}

width

width 属性设置元素的宽度。行内非替换元素（如：<a>,<span>）会忽略这个属性。

可选的值：

• auto 默认。浏览器会计算出实际的宽度。

• length 使用 px, cm, mm, em 等单位定义宽度。

• % 基于包含它的块级对象的百分比定义宽度。

div.normal {
    width: auto
}

div.big {
    width: 160px
}

div.small {
    width: 30px
}

max-height

max-height 属性设置元素的最大高度。

该属性值会对元素的高度设置一个最高限制。因此，元素可以比指定值矮，但不能比其高。不允许指定负值。

可选的值：

• none 默认。对元素的高度没有限制。

• length 使用 px, cm, mm, em 等单位定义元素的最大高度值。

• % 基于包含它的块级对象的百分比定义最大高度。

p {
    padding: 0;
    margin: 0;
    max-height: 10px;
    overflow: none;
}

设置最大高度后，段落的高度不会超过最大高度，但文本会溢出，其他部分可以覆盖到溢出的部分。

max-width

max-width 定义元素的最大宽度。

该属性值会对元素的宽度设置一个最高限制。因此，元素可以比指定值窄，但不能比其宽。不允许指定负值。

可选的值：

• none 默认。对元素的宽度没有限制。

• length 使用 px, cm, mm, em 等单位定义元素的最大宽度值。

• % 基于包含它的块级对象的百分比定义最大宽度。

p {
    max-width:100px;
}

min-height

min-height 属性设置元素的最小高度。

该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。

可选的值：

• length 使用 px, cm, mm, em 等单位定义元素的最小高度值，默认值是0。

• % 基于包含它的块级对象的百分比定义最小高度。

p {
    min-height:100px;
}

min-width

min-width 属性设置元素的最小宽度。

该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄。不允许指定负值。

可选的值：

• length 使用 px, cm, mm, em 等单位定义元素的最小宽度值，默认值：取决于浏览器。

• % 基于包含它的块级对象的百分比定义最小宽度。

p {
    min-width:100px;
}

小结

CSS 尺寸就是指元素内容的高度和宽度，虽然说非常简单，但却是必会知识，从属性的字面意思基本就可以领会其意思，没什么深入不深入可谈。

CSS 尺寸与盒模型有部分关联，稍后会补充盒模型的相关笔记。