CSS属性列表 - 布局属性

属性	版本	简介
display	CSS2/3	设置或检索对象是否及如何显示
float	CSS1	该属性的值指出了对象是否及如何浮动
clear	CSS1	该属性的值指出了不允许有浮动对象的边
visibility	CSS2	设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
overflow	CSS2/3	检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
overflow-x	CSS2/3	检索或设置当对象的内容超过其指定宽度时如何管理内容
overflow-y	CSS2/3	检索或设置当对象的内容超过其指定高度时如何管理内容
rotation	CSS3	检索或设置对象的旋转角度
rotation-point	CSS3	检索或设置的对象旋转时所参照的坐标点

display

语法：
display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | compact（CSS3） | run-in （CSS3）| ruby（CSS3） | ruby-base（CSS3） | ruby-text （CSS3）| ruby-base-group（CSS3） | ruby-text-group （CSS3）| flex（CSS3） | inline-flex（CSS3）
适用于：所有元素
取值：
none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline： 指定对象为内联元素。
block： 指定对象为块元素。
list-item： 指定对象为列表项目。
inline-block： 指定对象为内联块元素。（CSS2）
table： 指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table： 指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption： 指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell： 指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row： 指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group： 指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column： 指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group： 指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group： 指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group： 指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
compact： 分配对象为块对象或基于内容之上的内联对象（CSS3）
run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3）
如果run-in元素包含了一个块级元素，run-in元素将变成块级元素；
如果块内有一个块级元素（非float和position定义）紧跟run-in元素之后，run-in元素将变成块内第一个内联元素；一个run-in元素不能插入开始已有run-in元素或者本身就是run-in元素的块中；
其它情况下，run-in元素都将是一个块级元素；
ruby： 将对象作为表格脚注组显示（CSS3）
ruby-base： 将对象作为表格脚注组显示（CSS3）
ruby-text： 将对象作为表格脚注组显示（CSS3）
ruby-base-group： 将对象作为表格脚注组显示（CSS3）
ruby-text-group： 将对象作为表格脚注组显示（CSS3）
flex： 将对象作为弹性盒模型显示（CSS3）
inline-flex： 将对象作为内联块级弹性盒模型显示（CSS3）
说明：
设置或检索对象是否及如何显示。
如果display设置为none，float及position属性定义将不生效；
如果position既不是static也不是relative，float属性定义将不生效；
IE7及更早浏览器只支持 none | inline | block | inline-block | list-item 属性值；
Opera12.10及以上已支持直接写属性值：flex | inline-flex 而不用加前缀；
Firefox15-18仍然只支持flex的老写法：-moz-box | -moz-inline-box，所以在这里暂时把它归到不支持flex的浏览器范畴里。
对应的脚本特性为display。
兼容性：
不支持：table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group 属性值。
不支持：compact 属性值。
不支持：run-in 属性值。
不支持：ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group 属性值。
不支持：flex | inline-flex 属性值。

float

语法：
float：none | left | right
适用于：所有元素
取值：
none： 设置对象不浮动
left： 设置对象浮在左边
right： 设置对象浮在右边
说明：
该属性的值指出了对象是否及如何浮动。
当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。
float在绝对定位和display为none时不会被应用。
对应的脚本特性为styleFloat（IE）或cssFloat（非IE）。(注意这里为styleFloat或cssFloat，而不是float)
兼容性：
所有的浏览器都支持

clear

语法：
clear：none | left | right | both
适用于：块级元素
取值：
none： 允许两边都可以有浮动对象
both： 不允许有浮动对象
left： 不允许左边有浮动对象
right： 不允许右边有浮动对象
说明：
该属性的值指出了不允许有浮动对象的边。请参阅float属性
对应的脚本特性为clear。
兼容性：
所有的浏览器都支持

visibility

语法：
visibility：visible | hidden | collapse
适用于：所有元素
取值：
visible： 设置对象可视
hidden： 设置对象隐藏
collapse： 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE6及以下不支持此参数值
说明：
设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
如果希望对象为可视，其父对象也必须是可视的。
对应的脚本特性为visibility。
兼容性：
IE6及更早浏览器不支持visibility属性的collapse参数值。

overflow

语法：
overflow：visible | hidden | scroll | auto | no-display（CSS3） | no-content（CSS3）
适用于：非置换块元素和非置换内联块元素
取值：
visible： 不剪切内容。
hidden： 将超出对象尺寸的内容进行裁剪，将不出现滚动条。
scroll： 将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。
auto： 在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。
no-display： 当内容不适合当前内容盒子时，整个盒子将被移除，类似display:none。（CSS3）
no-content： 当内容不适合当前内容盒子时，整个内容被隐藏，类似visibility:hidden。（CSS3）
说明：
复合属性。检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。参阅overflow-x、overflow-y属性
如果只提供一个，其作用等同于overflow-x + overflow-y。
如果提供两个，第一个等同于overflow-x，第二个等同于overflow-y。
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
对应的脚本特性为overflow。
兼容性：
不支持：no-display | no-content 属性值，不支持同时设置2个值的情形。

overflow-x/overflow-y

语法：
overflow-x/overflow-y：visible | hidden | scroll | auto | no-display（CSS3） | no-content（CSS3）
适用于：非置换块元素和非置换内联块元素
取值：
visible： 不剪切内容。
hidden： 将超出对象宽度/高度的内容进行裁剪，将不出现滚动条。
scroll： 将超出对象宽度/高度的内容进行裁剪，并以滚动条的方式显示超出的内容。
auto： 在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。
no-display： 当内容不适合当前内容盒子时，整个盒子将被移除，类似display:none。（CSS3）
no-content： 当内容不适合当前内容盒子时，整个内容被隐藏，类似visibility:hidden。（CSS3）
说明：
对应的脚本特性为overflowX/overflowY
兼容性：
不支持：no-display | no-content 属性值。

rotation

语法：
rotation：<angle>
默认值：0
适用于：块元素、内联块元素、inline-table元素
取值：
<angle>
说明：
检索或设置对象的旋转角度。
rotation旋转以rotation-point设置的值作为参照原点进行旋转偏移。
元素的border、padding、内容以及任何没有设置fixed的background都随元素旋转而旋转。所有position取值为static和relative的子元素也会跟着旋转，其余的则不会。
rotation旋转不影响父元素和兄弟元素，它们的位置布局不变。所以当元素旋转时，可能会重叠到其它元素上。
该属性类似transform属性下的旋转rotate()，可能会被替代或废弃。
对应的脚本特性为rotation。
兼容性：
不支持

rotation-point

语法：
rotation-point：[ | | left | center | right | top | bottom ] | [ | | left | center | right ] [ | | top | center | bottom ]
默认值：50% 50%
适用于：块元素
取值：
<percentage>： 用百分比指定坐标值。
<length>： 用长度值指定坐标值。
left： 指定原点的横坐标为left
center： 指定原点的横坐标或纵坐标为center
right： 指定原点的横坐标为right
top： 指定原点的纵坐标为top
bottom： 指定原点的纵坐标为bottom
说明：
检索或设置的对象旋转时所参照的坐标点。
rotation旋转以rotation-point设置的值作为参照原点进行旋转偏移。
该属性类似transform-origin，可能会被替代或废弃。
对应的脚本特性为rotationPoint。
兼容性：
不支持