WEB标准学习路程之"CSS"：4.尺寸Dimensions属性

 

尺寸Dimensions属性

Dimensions Properties 属性		CSS Version 版本		Compatibility 兼容性		Inherit From Parent 继承性		Description 简介
height		CSS1		IE4+ , NS6+		无		检索或设置对象的高度
	max-height		CSS2		NONE		无		设置或检索对象的最大高度
	min-height		CSS2		IE6+		无		设置或检索对象的最小高度
	width		CSS1		IE4+ , NS6+		无		检索或设置对象的宽度
	max-width		CSS2		NONE		无		设置或检索对象的最大宽度
	min-width		CSS2		NONE		无		设置或检索对象的最小宽度

height

语法： height : auto | length

 

参数： 

auto : 　无特殊定位，根据HTML定位规则载文档流中分配

length : 　由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。不可为负数。请参阅长度单位

 

说明： 

检索或设置对象的高度。

对于img对象来说，仅指定此属性，其width值将根据图片源尺寸等比例缩放。

对应的脚本特性为height。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用style对象的posHeight，pixelHeight，以及对象的offsetHeight等特性。请参阅我编写的其他书目。

按照样式表的规则，对象的实际高度为其下列属性值之和：

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

而在IE6以前的版本，对象的实际高度却等于：

margin-top + height + margin-bottom

在IE6中，已经提供了针对此问题的解决方案。而上述属性的相互关系，请参看图例。

 

示例： 

div { height: 1in; }

div { position:absolute; top:-3px; height:6px; }

 

max-height

语法： max-height : none | length

 

参数： 

none : 　无最大高度限制

length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。请参阅长度单位

 

说明： 

设置或检索对象的最大高度。

如果max-height属性的值小于min-height属性的值，将会被自动转设为min-height属性的值。

目前IE5.5尚不支持此属性。

对应的脚本特性为maxHeight。请参阅我编写的其他书目。

 

示例： p { max-height: 200%; }

 

min-height

语法： min-height : none | length

 

参数： 

none : 　无最小高度限制

length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。请参阅长度单位

 

说明： 

设置或检索对象的最小高度。

如果min-height属性的值大于max-height属性的值，将会被自动转设为max-height属性的值。

目前IE5.5尚不支持此属性。

对应的脚本特性为minHeight。请参阅我编写的其他书目。

 

示例： p { min-height: 200px; }

width

语法： width : auto | length

 

参数： 

auto : 　无特殊定位，根据HTML定位规则载文档流中分配

length : 　由浮点数字和单位标识符组成的长度值，或者百分数。百分数是基于父对象的宽度。不可为负数。请参阅长度单位

 

说明： 

检索或设置对象的宽度。

对于img对象来说，仅指定此属性，其height值将根据图片源尺寸等比例缩放。

对应的脚本特性为width。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用style对象的posWidth，pixelWidth，以及对象的offsetWidth等特性。请参阅我编写的其他书目。

按照样式表的规则，对象的实际宽度为其下列属性值之和：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

而在IE6以前的版本，对象的实际宽度却等于：

margin-left + width + margin-right

在IE6中，已经提供了针对此问题的解决方案。而上述属性的相互关系，请参看图例。

 

示例： 

div { 1in; }

div { position:absolute; top:-3px; 6px; }

 

max-width

语法： max-width : none | length

 

参数： 

none : 　无最大宽度限制

length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。请参阅长度单位

 

说明： 

设置或检索对象的最大宽度。

如果max-width属性的值小于min-width属性的值，将会被自动转设为min-width属性的值。

目前IE5.5尚不支持此属性。

对应的脚本特性为maxWidth。请参阅我编写的其他书目。

 

示例： p { max- 200%; }

min-width

语法： min-width : none | length

 

参数： 

none : 　无最小宽度限制

length : 　由浮点数字和单位标识符组成的长度值，或者百分数。不可为负数。请参阅长度单位

 

说明： 

设置或检索对象的最小宽度。

如果min-width属性的值大于max-width属性的值，将会被自动转设为max-width属性的值。

目前IE5.5尚不支持此属性。

对应的脚本特性为minWidth。请参阅我编写的其他书目。

 

示例： p { min- 200px; }

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

布局Layout属性

属性		版本		兼容性		继承性		简介
clear		CSS1		IE4+ , NS4+		无		该属性的值指出了不允许有浮动对象的边。请参阅float属性
	float		CSS1		IE4+ , NS4+		无		该属性的值指出了对象是否及如何浮动。请参阅clear属性
	clip		CSS2		IE4+ , NS6+		无		检索或设置对象的可视区域。区域外的部分是透明的
	overflow		CSS2		IE4+ , NS6+		无		检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
	overflow-x		IE专有属性		IE4+		无		检索或设置当对象的内容超过其指定宽度时如何管理内容
	overflow-y		IE专有属性		IE4+		无		检索或设置当对象的内容超过其指定高度时如何管理内容
	display		CSS1/CSS2		IE4+ , NS4+		无		设置或检索对象是否及如何显示
	visibility		CSS2		IE4+ , NS6+		无		设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间

 clear

语法： clear : none | left |right | both

 

参数： 

none : 　允许两边都可以有浮动对象

both : 　不允许有浮动对象

left : 　不允许左边有浮动对象

right : 　不允许右边有浮动对象

 

说明： 

该属性的值指出了不允许有浮动对象的边。请参阅float属性。

对应的脚本特性为clear。请参阅我编写的其他书目。

 

示例： 

div { clear : left }

img { float: right }

float

语法： float : none | left |right

 

参数： 

none : 　对象不浮动

left : 　对象浮在左边

right : 　对象浮在右边

 

说明：

该属性的值指出了对象是否及如何浮动。请参阅clear属性。

当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。

对应的脚本特性为styleFloat。请参阅我编写的其他书目。

 

示例： 

div { clear : left }

img { float: right }

clip

语法： clip : auto | rect ( number number number number )

 

参数： 

auto : 　对象无剪切

rect ( number number number number ) : 　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切

 

说明： 

检索或设置对象的可视区域。区域外的部分是透明的。

必须将position的值设为absolute，此属性方可使用。

自IE5开始，此属性在MAC平台上可用。

对应的脚本特性为clip。请参阅我编写的其他书目。

 

示例： 

div { position:absolute; 60px; height:60px; clip:rect(0 20 50 10); }

div { position:absolute; 60px; height:60px; clip:rect(1cm auto 50px 10cm); }

overflow

语法： overflow : visible | auto | hidden | scroll

 

参数： 

visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效

auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条

hidden : 　不显示超过对象尺寸的内容

scroll : 　总是显示滚动条

 

说明： 

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

设置textarea对象为hidden值将隐藏其滚动条。

对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。

自IE5开始，此属性在MAC平台上可用。

对应的脚本特性为overflow。请参阅我编写的其他书目。

 

示例： 

body { overflow: hidden; }

div { overflow: scroll; height: 100px; 100px; }

overflow-x

语法： overflow-x : visible | auto | hidden | scroll

 

参数： 

visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的宽度。并且clip属性设置将失效

auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条

hidden : 　不显示超过对象宽度的内容

scroll : 　总是显示横向滚动条

 

说明： 

检索或设置当对象的内容超过其指定宽度时如何管理内容。

参阅overflow属性。

对应的脚本特性为overflowX。请参阅我编写的其他书目。

 

示例： 

body { overflow-x: hidden; }

div { overflow-x: scroll; height: 100px; 100px; }

overflow-y

语法： overflow-y : visible | auto | hidden | scroll

 

参数： 

visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的高度。并且clip属性设置将失效

auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条

hidden : 　不显示超过对象高度的内容

scroll : 　总是显示纵向滚动条

 

说明： 

检索或设置当对象的内容超过其指定高度时如何管理内容。

参阅overflow属性。

对应的脚本特性为overflowY。请参阅我编写的其他书目。

 

示例： 

body { overflow-y: hidden; }

div { overflow-y: scroll; height: 100px; 100px; }

display

语法：

display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group

 

参数： 

block : 　CSS1　块对象的默认值。用该值为对象之后添加新行

none : 　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline : 　CSS1　内联对象的默认值。用该值将从对象中删除行

compact : 　CSS2　分配对象为块对象或基于内容之上的内联对象

marker : 　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用

inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器

list-item : 　CSS1　将块对象指定为列表项目。并可以添加可选项目标志

run-in : 　CSS2　分配对象为块对象或基于内容之上的内联对象

table : 　CSS2　将对象作为块元素级的表格显示

table-caption : 　CSS2　将对象作为表格标题显示

table-cell : 　CSS2　将对象作为表格单元格显示

table-column : 　CSS2　将对象作为表格列显示

table-column-group : 　CSS2　将对象作为表格列组显示

table-header-group : 　CSS2　将对象作为表格标题组显示

table-footer-group : 　CSS2　将对象作为表格脚注组显示

table-row : 　CSS2　将对象作为表格行显示

table-row-group : 　CSS2　将对象作为表格行组显示

 

说明： 

设置或检索对象是否及如何显示。

目前 IE5.5仅支持以上CSS1的参数。

对应的脚本特性为display。请参阅我编写的其他书目。

 

示例： img { disply: block; float: right; }

 

visibility

 

语法： visibility : inherit | visible | collapse | hidden

参数： 

inherit : 　继承上一个父对象的可见性

visible : 　对象可视

hidden : 　对象隐藏

collapse : 　主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE5.5尚不支持此属性。

 

说明： 

设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间。

如果希望对象为可视，其父对象也必须是可视的。

对应的脚本特性为visibility。请参阅我编写的其他书目。

 

示例： img { visibility: inherit; float: right; }