时间:2021-07-01 10:21:17 帮助过:2人阅读
CSS 尺寸属性允许你控制元素的高度(height)和宽度(width)。
属性 | 描述 |
---|---|
height | 设置元素的高度。 |
width | 设置元素的宽度。 |
max-height | 设置元素的最大高度。 |
max-width | 设置元素的最大宽度。 |
min-height | 设置元素的最小高度。 |
min-width | 设置元素的最小宽度。 |
我们一般所指的高度和宽度是指下图中红线标示的区域。
IE 5.X 和 6 这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。简单知道就行了。
heightheight 属性设置元素的高度。行内非替换元素(如:,,影响他们高度的是line-height属性)会忽略这个属性。
可选的值:
auto 默认。浏览器会计算出实际的高度。
length 使用 px, cm, mm, em 等单位定义高度。
% 基于包含它的块级对象的百分比定义高度。
div.normal { height: auto}div.big { height: 160px}div.small { height: 30px}width
width 属性设置元素的宽度。行内非替换元素(如:,)会忽略这个属性。
可选的值:
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-widthmax-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 尺寸与盒模型有部分关联,稍后会补充盒模型的相关笔记。