3.9  布局属性layout

3.9  布局属性layout

布局属性用来设置对象的浮动、换行、溢出等布局样式。

1）无边属性（clear）

该属性的值指出了不允许有浮动对象的边。可选值如下。

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

both：不允许有浮动对象。

left：不允许左边有浮动对象。

right：不允许右边有浮动对象。

例如：

div { clear : left }
img { float: right }

2）浮动属性（float）

该属性的值指出了对象是否及如何浮动。可选值如下。

none：对象不浮动。

left：对象浮在左边。

right：对象浮在右边。

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

例如：

img { float: right }

3）剪切属性（clip）

该属性用于检索或设置对象的可视区域。区域外的部分是透明的。必须将position的值设为absolute，此属性方可使用。

auto：对象无剪切。

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

例如：

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); }

4）溢出属性（overflow）

该属性用于检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。可选值如下。

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

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

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

scroll：总是显示滚动条。

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

例如：

body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }

5）横向溢出属性（overflow-x）

该属性用于检索或设置当对象的内容超过其指定宽度时如何管理内容。可选值如下。

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

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

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

scroll：总是显示横向滚动条。

例如：

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

6）纵向溢出属性（overflow-y）

该属性用于检索或设置当对象的内容超过其指定高度时如何管理内容。可选值如下。

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

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

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

scroll：总是显示横向滚动条。

例如：

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

7）显示属性（display）

该属性用于设置或检索对象是否及如何显示。可选值如下。

block：CSS 1块对象的默认值。用该值为对象之后添加新行。

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

inline：CSS 1内联对象的默认值。用该值将从对象中删除行。

compact：CSS 2分配对象为块对象或基于内容之上的内联对象。

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

inline-table：CSS 2将表格显示为无前后换行的内联对象或内联容器。

list-item：CSS 1将块对象指定为列表项目，并可以添加可选项目标志。

run-in：CSS 2分配对象为块对象或基于内容之上的内联对象。

table：CSS 2将对象作为块元素级的表格显示。

table-caption：CSS 2将对象作为表格标题显示。

table-cell：CSS 2将对象作为表格单元格显示。

table-column：CSS 2将对象作为表格列显示。

table-column-group：CSS 2将对象作为表格列组显示。

table-header-group：CSS 2将对象作为表格标题组显示。

table-footer-group：CSS 2将对象作为表格脚注组显示。

table-row：CSS 2将对象作为表格行显示。

table-row-group：CSS 2将对象作为表格行组显示。

例如：

img { display: block; float: right; }

8）占位属性（visibility）

该属性用于设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间。如果希望对象为可视，其父对象也必须是可视的。可选值如下。

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

visible：对象可视。

hidden：对象隐藏。

collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

例如：

img { visibility: inherit; float: right; }