z-index:
auto (默认值)
检索或设置对象的层叠顺序。
并级的对象，此属性参数值越大，则被层叠在最上面。
如两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。
必须定义position属性值为 relative | absolute | fixed | center | page，此取值方可生效。
对应的脚本特性为zIndex。
--------------------------------------------------------------------------------------------------
clip：检索或设置对象的可视区域。区域外的部分是透明的。
必须将position的值设为absolute，此属性方可使用。
auto： 对象无剪切
rect(|auto |auto |auto |auto)： 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。
上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0；
右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即 右-下 方位的auto值为盒子的实际宽度和高度；
示例：clip:rect(auto 50px 20px auto)
说明：上边不剪切，右边从第50个像素开始剪切直至最右边，下边从第20个像素开始剪切直至最底部，左边不剪切
inset(|auto |auto |auto |auto)： 该剪裁方式与 rect() 类似，不同的是 inset() 的剪裁，每个方位都是参照该方位的边界来进行裁剪的。
上-右-下-左 方位的裁剪：从0开始剪裁直到设定值，即 上-右-下-左 方位的auto值都等同于0；（CSS3）
-----------------------------------------------------------------------------------------------------------
position： 检索对象的定位方式。
static： 对象遵循常规流。top，right，bottom，left等属性不会被应用。
relative： 对象遵循常规流，并且依据自身在正常流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。层叠通过z-index属性定义。
absolute： 对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠，其层叠通过z-index属性定义。
fixed： 对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值
center： 对象脱离常规流，使用top，right，bottom，left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠，其层叠通过z-index属性定义。（CSS3）
page： 盒子的位置计算参照absolute。（CSS3）
------------------------------------------------------------------------------------------------------------------
margin
h2{margin:10px 0;}
检索或设置对象四边的外延边距。
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
内联对象可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
外延边距始终透明。
某些相邻的margin会发生合并，我们称之为margin折叠
---------------------------------------------------------------------------------------------------------
aspect-ratio
： 指定比率
定义输出设备中的页面可见区域宽度与高度的比率。
本特性接受min和max前缀，因此可以派生出min-aspect-ratio和max-aspect-ratio两个媒体特性。
@media screen and (aspect-ratio:1680/957){ … }
@import url(example.css) screen and (max-aspect-ratio:20/11);
---------------------------------------------------------------------
background：
[ background-color ]： 指定对象的背景颜色。
[ background-image ]： 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
[ background-repeat ]： 指定对象的背景图像如何铺排填充。
[ background-attachment ]： 指定对象的背景图像是随对象内容滚动还是固定的。
[ background-position ]： 指定对象的背景图像位置。
[ background-origin ]： 指定对象的背景图像显示的原点。
[ background-clip ]： 指定对象的背景图像向外裁剪的区域。
[ background-size ]： 指定对象的背景图像的尺寸大小。
--------------------------------------------------------------------
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。
fixed： 背景图像相对于窗体固定。
scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）
-----------------------------------------------------------------------------------------------------------------------------
background-clip 指定对象的背景图像向外裁剪的区域。
padding-box： 从padding区域（不含padding）开始向外裁剪背景。
border-box： 从border区域（不含border）开始向外裁剪背景。
content-box： 从content区域开始向外裁剪背景。
text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。
---------------------------------------------------------------------------------------------------------------
background-repeat： 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。
允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。
如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值
对应的脚本特性为backgroundRepeat。
repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向上平铺
repeat： 背景图像在横向和纵向平铺
no-repeat： 背景图像不平铺
round： 背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space： 背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3
-------------------------------------------------------------------------
background-position： 设置或检索对象的背景图像位置。必须先指定background-image属性。
如果提供四个，每个或偏移前都必须跟着一个关键字（即left | center | right | top | bottom），偏移量相对关键字位置进行偏移。
示例：假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px
缩写方式： background:url(test1.jpg) no-repeat right 20px bottom 20px;
： 用百分比指定背景图像填充的位置。可以为负值。
： 用长度值指定背景图像填充的位置。可以为负值。
center： 背景图像横向和纵向居中。
left： 背景图像在横向上填充从左边开始。
right： 背景图像在横向上填充从右边开始。
top： 背景图像在纵向上填充从顶部开始。
bottom： 背景图像在纵向上填充从底部开始。
------------------------------------------------------------
background-origin： 设置或检索对象的背景图像计算background-position时的参考原点(位置)。
padding-box： 从padding区域（含padding）开始显示背景图像。
border-box： 从border区域（含border）开始显示背景图像。
content-box： 从content区域开始显示背景图像。
【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）
（CSS2）
inline-table： 指定对象作为内联元素级的表格。类同于html标签
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）
table-row： 指定对象作为表格行。类同于html标签
|
【margin】
margin 检索或设置对象四边的外延边距
margin-top 检索或设置对象顶边的外延边距
margin-right 检索或设置对象右边的外延边距
margin-bottom 检索或设置对象底边的外延边距
margin-left 检索或设置对象左边的外延边距
argin：检索或设置对象四边的外延边距。
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
内联对象可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
外延边距始终透明。
某些相邻的margin会发生合并，我们称之为margin折叠：
margin折叠常规认知：
margin折叠只发生在块级元素上；
浮动元素的margin不与任何margin发生折叠；
设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
绝对定位元素的margin不与任何margin发生折叠；
根元素的margin不与其它任何margin发生折叠；
auto： 值被设置为相对边的值
： 用长度值来定义外补白。可以为负值
： 用百分比来定义外补白。可以为负值
------------------------------------------------------------------------------------
*************************************************************************************************************
【padding】
padding 检索或设置对象四边的内部边距
padding-top 检索或设置对象顶边的内部边距
padding-right 检索或设置对象右边的内部边距
padding-bottom 检索或设置对象底边的内部边距
padding-left 检索或设置对象左边的内部边距
padding：检索或设置对象四边的内部边距。
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
内联对象可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。
： 用长度值来定义内补白。不允许负值
： 用百分比来定义内补白。不允许负值
------------------------------------------------------------
*********************************************************************************************************
【text】
text-transform 检索或设置对象中的文本的大小写
white-space 设置或检索对象内空格的处理方式
tab-size 检索或设置对象中的制表符的长度
word-wrap 设置或检索当内容超过指定容器的边界时是否断行
word-break 设置或检索对象内文本的字内换行行为
text-align 设置或检索对象中内容的水平对齐方式
text-align-last 设置或检索一个块内的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）
或者被强制打断的行的对齐方式
text-justify 设置或检索对象内调整文本使用的对齐方式
word-spacing 检索或设置对象中的单词之间的最小，最大和最佳间隙
letter-spacing 检索或设置对象中的字符之间的最小，最大和最佳间隙
text-indent 检索或设置对象中的文本的缩进
vertical-align 设置或检索对象内容的垂直对其方式
line-height 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离
-------------------------------------------------
letter-spacing：检索或设置对象中的字符之间的最小，最大和最佳间隙。
该属性将指定的间隔添加到每个文字(包括单词内的每个字母)之后；
letter-spacing不能被应用于一行的开始和结束；
normal： 默认间隔
： 用长度值指定间隔。可以为负值。
： 用百分比指定间隔。可以为负值。
-----------------------------------------------------------------
line-height：检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
默认值：normal
normal： 允许内容顶开或溢出指定的容器边界。
： 用长度值指定行高。可以为负值。
： 用百分比指定行高，其百分比取值是基于字体的高度尺寸。可以为负值。
： 用乘积因子指定行高。可以为负值。
------------------------------------------------------------
text-align ：设置或检索对象中内容的水平对齐方式。
块级元素的文本是一些堆叠的线框
要使得 text-align 的 justify 两端对齐生效，需要在汉字间插入有空白，如空格；
块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）及被强制打断的行，其两端对齐需使用 text-align-last；
IE浏览器下，如果 text-align-last 要生效，必须先定义 text-align 为justify；
单行两端对齐效果变得比较简单：
li{overflow:hidden;width:200px;height:21px;text-align:justify;text-align-last:justify;}
li:after{display:inline-block;overflow:hidden;width:100%;height:0;content:'';}
left： 内容左对齐。
center： 内容居中对齐。
right： 内容右对齐。
justify： 内容两端对齐。
start： 内容对齐开始边界。（CSS3）
end： 内容对齐结束边界。（CSS3）
： 字符串必须是单一字符，否则申明将无效。（CSS3）
match-parent： 这个值和 inherit 表现一致，只是该值继承的 start 或 end 关键字是针对父母的 direction 值并计算的，计算值可以是 left 和 right 。（CSS3）
start end： 指定 start 对齐第一行和任何强制打断的行；end 对齐所有剩余的行不受 text-align-last 影响。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
需注意几点：
所有主流浏览器都支持 text-align 的 justify 属性值；
text-align不处理强制打断的行，也不处理块内的最后一行，换句话说，如果块内仅有一行文本（该行既是第一行也是最后一行），这时仅设置text-align:justify无法让该行两端对齐；
text-align-last 是用来处理块内的最后一行和强制打断的行的，所以当要设置单行文本两端对齐时，需使用 text-align-last；
非Firefox浏览器要使得两端对齐生效，需在文本间插入空白，如空格（如果一行仅有2个汉字，Firefox也需在之间插入空白）；
Chrome23, Safari5.1.7, Opera12.5 尚不支持 text-align-last；
依据上述的点，要实现单行两端对齐，可以走2个方向：
由于所有浏览器都支持 text-align 的 justify 属性值，但不全支持 text-align-last，我们可以对非IE及IE7以上浏览器使用伪对象生成额外的内容（IE7及以下浏览器不支持伪对象，使用text-align-last处理），置于第二行并将其隐藏，这时第一行文本（即要对齐的那个单行文本）可使用text-align:justify来对齐
支持 text-align-last 的浏览器，如IE, Firefox使用 text-align-last 处理，不支持的浏览器使用如上述方法处理；
所以就目前情况来看，使用第一种方案是比较简约的，可以轻易的兼容IE5.5-10, Firefox, Chrome, Safari, Opera
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
text-align-last：设置或检索一个块内的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）
或者被强制打断的行的对齐方式
如果某一行同时也是块内的第一行或者第一行但后面紧跟着强制换行，除非显示的指定 text-align 第一行对齐方式（值 'start end'），否则 text-align-last 将会覆盖 text-align；
如果 auto 值被指定，内容的对齐方式将依据 text-align 的设定，除非 text-align 设置为justify；
作为IE的私有属性之一，IE5.5率先实现了 text-align-last ，后期被w3c采纳成标准属性；
IE7及以下浏览器只实现了块内最后一行的对齐方式，没有处理被强制打断的行的对齐方式，从IE8开始，这两种形式的行对齐都被支持；
IE浏览器下，如果 text-align-last 要生效，必须先定义 text-align 为justify；
auto： 无特殊对齐方式。
left： 内容左对齐。
center： 内容居中对齐。
right： 内容右对齐。
justify： 内容两端对齐。
start： 内容对齐开始边界。
end： 内容对齐结束边界。
-----------------------------------------------
text-indent： 检索或设置对象中的文本的缩进。
内联对象要使用该属性必须先使该对象表现为块级或内联块级。
hanging和each-line关键字紧随在缩进数值之后
div{text-indent:2em each-line;}
： 用长度值指定文本的缩进。可以为负值。
： 用百分比指定文本的缩进。可以为负值。
each-line： 定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。（CSS3）
hanging： 反向所有被缩进作用的行。
---------------------------------------------------------------------------------------------------
text-transform ：检索或设置对象中的文本的大小写。
none： 无转换
capitalize： 将每个单词的第一个字母转换成大写
uppercase： 将每个单词转换成大写
lowercase： 将每个单词转换成小写
full-width： 将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意 符号。
---------------------------------------------------------------------------------------------------------
vertical-align：设置或检索内联元素在行框内的垂直对其方式。
baseline： 将支持valign特性的对象的内容与基线对齐
sub： 垂直对齐文本的下标
super： 垂直对齐文本的上标
top： 将支持valign特性的对象的内容与对象顶端对齐
text-top： 将支持valign特性的对象的文本与对象顶端对齐
middle： 将支持valign特性的对象的内容与对象中部对齐
bottom： 将支持valign特性的对象的文本与对象底端对齐
text-bottom： 将支持valign特性的对象的文本与对象顶端对齐
： 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
： 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。
----------------------------------------------------------------------------------------------------
word-break：设置或检索对象内文本的字内换行行为。
对于解决防止页面中出现连续无意义的长字符打破布局，应该使用break-all；
作为IE的私有属性之一，IE5.5率先实现了 word-break ，后期被w3c采纳成标准属性；
normal： 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
keep-all： 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
break-all： 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的 英文字母间断行。
-----------------------------------------------------------
word-wrap： 设置或检索当内容超过指定容器的边界时是否断行。
normal： 允许内容顶开或溢出指定的容器边界。
break-word： 内容将在边界内换行。如果需要，单词内部允许断行。
扫一扫
593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
