******* CSS 常用属性 *********
z-index:
auto (默认值)
检索或设置对象的层叠顺序。
并级的对象，此属性参数值越大，则被层叠在最上面。
如两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。
必须定义position属性值为 relative | absolute | fixed | center | page，此取值方可生效。
对应的脚本特性为zIndex。
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
--------------------------------------------------------------------------------------------------
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 ]： 指定对象的背景图像的尺寸大小。
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
--------------------------------------------------------------------
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区域开始显示背景图像。
-----------------------------------------------------------
【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： 内容将在边界内换行。如果需要，单词内部允许断行。
------------------------------------------------------------------
