Dzwebs.Net

撰写电脑技术杂文十余年

CSS布局对象之Layout 用法介绍

Admin | 2008-5-16 21:18:07 | 被阅次数 | 7032

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

一: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; width:60px; height:60px; clip:rect(0 20 50 10); }
div { position:absolute; width: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; width: 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; width: 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; width: 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; }


该杂文来自: 网页制作杂文

上一篇:网页制作之CS SDimensions Properties 尺寸属性

下一篇:CSS外补丁Margins属性介绍

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计