CSS样式表（三）

前端人员在学习开发过程中常用的CSS样式总结：

　　【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： 内容将在边界内换行。如果需要，单词内部允许断行。

　　

　爱创课堂-专业的前端HTML5培训机构

　　爱创课堂秉承纯干货,不忽悠的态度专注前端培训,让每个零基础的学员都能真正的从入门到精通。

　　想要学习前端的朋友们可以点击“↑”上面的字哦

　　爱创前端兴趣部落，纯干货分享