CSS常用属性总结二

2013-12-03 11:35:19 爱思资源网


                                                  ******* CSS 常用属性  *********

【layout】
 
clear:该属性的值指出了不允许有浮动对象的边。
 
默认值:none
 
none: 允许两边都可以有浮动对象 
both: 不允许有浮动对象 
left: 不允许左边有浮动对象 
right: 不允许右边有浮动对象 
 
-----------------------------------------------------------
 
display:设置或检索对象是否及如何显示。 
 
如果display设置为none,float及position属性定义将不生效; 
如果position既不是static也不是relative,float属性定义将不生效; 
IE7及更早浏览器只支持 none | inline | block | inline-block | list-item 属性值; 
Opera12.10及以上已支持直接写属性值:flex | inline-flex 而不用加前缀; 
 
none: 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 
inline: 指定对象为内联元素。 
block: 指定对象为块元素。 
list-item: 指定对象为列表项目。 
inline-block: 指定对象为内联块元素。(CSS2) 
table: 指定对象作为块元素级的表格。类同于html标签(CSS2) 
inline-table: 指定对象作为内联元素级的表格。类同于html标签
(CSS2) 
table-caption: 指定对象作为表格标题。类同于html标签
(CSS2) 
table-row-group: 指定对象作为表格行组。类同于html标签
(CSS2) 
table-column: 指定对象作为表格列。类同于html标签
(CSS2) 
table-column-group: 指定对象作为表格列组显示。类同于html标签
(CSS2) 
table-header-group: 指定对象作为表格标题组。类同于html标签
(CSS2) 
table-footer-group: 指定对象作为表格脚注组。类同于html标签
(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) 
 
-------------------------------------------------------------------
 
 float: 该属性的值指出了对象是否及如何浮动。 
 
当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。 
float在绝对定位和display为none时不会被应用。 
 
none: 设置对象不浮动 
left: 设置对象浮在左边 
right: 设置对象浮在右边 
 
--------------------------------------------------
 
overflow: 复合属性。检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
 
默认值:visible
 
如果只提供一个,其作用等同于overflow-x + overflow-y。 
如果提供两个,第一个等同于overflow-x,第二个等同于overflow-y。 
对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。 
 
visible: 不剪切内容。 
hidden: 将超出对象尺寸的内容进行裁剪,将不出现滚动条。 
scroll: 将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。 
auto: 在需要时剪切内容并添加滚动条,此为body对象和textarea的默认值。 
no-display: 当内容不适合当前内容盒子时,整个盒子将被移除,类似display:none。(CSS3) 
no-content: 当内容不适合当前内容盒子时,整个内容被隐藏,类似visibility:hidden。(CSS3)
 
-------------------------------------------------------------------------------------------------
 
overflow-x:检索或设置当对象的内容超过其指定宽度时如何管理内容。
 
默认值:visible
 
visible: 不剪切内容。 
hidden: 将超出对象宽度的内容进行裁剪,将不出现滚动条。 
scroll: 将超出对象宽度的内容进行裁剪,并以滚动条的方式显示超出的内容。 
auto: 在需要时剪切内容并添加滚动条,此为body对象和textarea的默认值。 
no-display: 当内容不适合当前内容盒子时,整个盒子将被移除,类似display:none。 
no-content: 当内容不适合当前内容盒子时,整个内容被隐藏,类似visibility:hidden。
 
---------------------------------------------------------------------------------------
 
overflow-y:索或设置当对象的内容超过其指定高度时如何管理内容。
 
默认值:visible
 
visible: 不剪切内容。 
hidden: 将超出对象高度的内容进行裁剪,将不出现滚动条。 
scroll: 将超出对象高度的内容进行裁剪,并以滚动条的方式显示超出的内容。 
auto: 在需要时剪切内容并添加滚动条,此为body对象和textarea的默认值。 
no-display: 当内容不适合当前内容盒子时,整个盒子将被移除,类似display:none。 
no-content: 当内容不适合当前内容盒子时,整个内容被隐藏,类似visibility:hidden。 
 
----------------------------------------------------------------------------------------
 
rotation:检索或设置对象的旋转角度。
 
默认值:0
 
rotation旋转以rotation-point设置的值作为参照原点进行旋转偏移。 
元素的border、padding、内容以及任何没有设置fixed的background都随元素旋转而旋转。所有position取值为static和relative的子元素也会跟着旋转,其余的则不会。 
rotation旋转不影响父元素和兄弟元素,它们的位置布局不变。所以当元素旋转时,可能会重叠到其它元素上。 
该属性类似transform属性下的旋转rotate(),可能会被替代或废弃。 
 
: 指定角度。可以为负值 
 
-------------------------------------------------
 
rotation-point:检索或设置的对象旋转时所参照的坐标点。
 
rotation旋转以rotation-point设置的值作为参照原点进行旋转偏移。 
该属性类似transform-origin,可能会被替代或废弃。 
 
: 用百分比指定坐标值。 
: 用长度值指定坐标值。 
left: 指定原点的横坐标为left 
center: 指定原点的横坐标或纵坐标为center 
right: 指定原点的横坐标为right 
top: 指定原点的纵坐标为top 
bottom: 指定原点的纵坐标为bottom 
 
-------------------------------------------------------------------------
 
visibility:设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间 
如果希望对象为可视,其父对象也必须是可视的。 
 
默认值:visible
 
visible: 设置对象可视 
hidden: 设置对象隐藏 
collapse: 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。IE6及以下不支持此参数值 
 
---------------------------------------------------------------------------------------------------------------------------------
table-cell: 指定对象作为表格单元格。类同于html标签
(CSS2) 
(CSS2) 
table-row: 指定对象作为表格行。类同于html标签