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