css3布局

css3布局

1.clear该属性的值指出了不允许有浮动对象的边。用法如下

none： 允许两边都可以有浮动对象 
both： 不允许有浮动对象 
left： 不允许左边有浮动对象 
right： 不允许右边有浮动对象 
.test2{clear:right;background:#ddd;}

2.display该属性设置或检索对象是否及如何显示。用法如下

none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
inline： 指定对象为内联元素。 
block： 指定对象为块元素。
inline-block： 指定对象为内联块元素。（CSS2）
.table-footer-group{display:block;}

3.float该属性的值指出了对象是否及如何浮动。用法如下

none： 设置对象不浮动 
left： 设置对象浮在左边 
right： 设置对象浮在右边
.test{float:right;background:#eee;}

4.overflow复合属性。检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。用法如下 ##

如果只提供一个，其作用等同于overflow-x + overflow-y。 
如果提供两个，第一个等同于overflow-x，第二个等同于overflow-y。
visible： 不剪切内容。 
hidden： 将超出对象尺寸的内容进行裁剪，将不出现滚动条。 
scroll： 将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。 
auto： 在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。
.test{overflow:auto;width:200px;height:100px;background:#eee;}

5.visibility该属性设置或检索是否显示对象，用法如下

与display属性不同，此属性为隐藏的对象保留其占据的物理空间 
如果希望对象为可视，其父对象也必须是可视的。
visible： 设置对象可视 
hidden： 设置对象隐藏 
collapse： 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE6及以下不支持此参数值 
.test{visibility:hidden;}