CSS浮动Layout

AnyBisks 2011-11-27

clear版本:CSS1 目的:设置浮动元素常用

语法:

clear:none|left|right|both

参数:

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

both: 不允许有浮动对象

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

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

float版本:CSS1 目的:设置元素浮动方向常用

语法:

float:none|left|right

参数:

none: 对象不浮动

left: 对象浮在左边

right: 对象浮在右边

visibility目的:隐藏和显示元素常用

语法:

visibility:inherit|visible|collapse|hidden

参数:

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

visible: 对象可视

hidden: 对象隐藏

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

clip版本:CSS2 目的:对象进行裁剪常用

语法:

clip:auto|rect(numbernumbernumbernumber)

参数:

auto: 对象无剪切

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

overflow版本:CSS2 目的:为元素添加滚动条

语法:

overflow:visible|auto|hidden|scroll

参数:

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

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

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

scroll: 总是显示滚动条

overflow-x目的:为元素添加水平滚动条

语法:

overflow-x:visible|auto|hidden|scroll

参数:

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

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

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

scroll: 总是显示横向滚动条

overflow-y目的:为元素添加垂直滚动条

语法:

overflow-y:visible|auto|hidden|scroll

参数:

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

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

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

scroll: 总是显示纵向滚动条

display版本:CSS1/CSS2 目的:设置对象作为表格显示

语法:

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 将对象作为表格行组显示

相关推荐