CSS学习之文本属性系列

text-indent

1. text-indet
        对块级元素的第一行进行缩进
    应用于：块级元素
    继承性：有
    初始值：0
    可包含的值：
        2em  --- 通常用em，缩进2个字的距离
        -2em  --- 可以为负
        5%  ---> 相对于包含块的宽度

text-align

2. text-align
        是将块级元素中的内联内容在其width水平方向上对齐
    应用于：块级元素
    继承性：有
    初始值：用户代理指定的值，还可能取决于书写方向
    可包含的值：
        left
        right
        center
        justify

text-align-last

3. text-align-last:
        决定最后一行的对齐方向（只有text-align为 justify才有用）
    应用于：块级元素
    继承性：有
    初始值：auto
    可包含的值：
        auto，向左
        left
        right
        center
        justify

line-height

4. line-height:
        行高，指的是文本行基线之间的距离
    应用于：所有元素（实际上只对行内非替换元素有效）
            对于块级元素来说，定义的是
    继承性：有
    初始值：normal
    可包含的值：
        normal  ---> 一般为字体大小的1.2倍
        1  ---> 缩放因子，子继承的时候继承的就是这个1，然后再和font-size向乘
        120%  ---> 根据字体大小计算，
        12px
        
    常见应用：
        单行文本垂直居中：让line-height == height即可
        这个的意思是，让这个整个元素框在包含块中垂直居中

vertical-align

5. vertical-align:
        垂直文本对齐
    应用于行内元素和表单元格
    继承性：无
    初始值：baseline
    可包含的值：
        baseline: 
            一个元素的基线与父元素的基线对齐，
            如果是一个行内替换元素，则是底端与父元素的基线对齐
        middle:
            一个元素的行内框的中点与基线上方0.5ex对齐
        top: 
            一个元素的行内框顶端与包含该元素的行框顶端对齐
        bottom：
            一个元素的行内框底端与包含该元素的行框底端对齐
        text-bottom
            一个元素的行内框底端与行内文本的底端对齐（em框）
        text-top
            一个元素的行内框顶端与行内文本的顶端对齐
        super: （上标）
               一个元素的基线(行内替换元素是底端)相对于父元素的基线升高，
               升高多少由用户代理决定
        sub: （下标）
            一个元素的基线相对于父元素的基线降低，
            降低多少由用户代理决定
        120%  ---> 相对于行高计算
        12px  ---> 将元素的行内框上升12px
        -12px  ---> 将元素的行内框下降12px
            注意：
                1. 垂直对齐的文本不会成为另一行的一部分，也不会覆盖其他行的文本
                2. 但是会改变[行框]高度，因为操作的是行内框
                3. 行框的高度 = 
                                最高行内框的顶端 到--> 最低行内框的底端

word-spacing

6. word-spacing
        增加或减少字与字之间的间距
        “字” 由非空白字符组成并且由空白字符包围
        (英文就是单词与单词之间啦，我试过中文，没什么效果，
         其实用户代理不好确定一个语言中的合法字和非合法字)
    应用于：所有元素
    继承性：有
    初始值：normal  ---> 0
    可包含的值：
        normal --> 0
        20px
        -20px

letter-spacing

7. letter-spacing
        增加或减少字母与字母之间的间距
        存在的问题跟word-spacing一样
    应用于：所有元素
    继承性：有
    初始值：normal ---> 0
    可包含的值：
        normal  ---> 0
        10px
        -10px

text-transform

8. text-transform
    应用于：所有元素
    继承性：有
    初始值：none
    可包含的值：
        none
        uppercase
        lowercase
        capitalize

text-decoration

9. text-decoration
    应用于：所有元素
    继承性：无
    初始值：none
    可包含的值：
        none
        underline
        overline
        line-through
    例子：
        text-decoration: underline overline; (可以写多个)

text-shadow

10. text-shadow
     应用于：所有元素
     继承性：有
     初始值：none
     可包含的值：
        颜色 水平偏移 垂直偏移 模糊距离, 水平偏移 垂直偏移 模糊距离 颜色
        1. 颜色，可选，可放置所有数字的最后
        2. 水平和垂直必须
        3. 模糊距离可选
        4. 可以设置多个阴影

white-space

11. white-space
    应用于：所有元素
    继承性：有
    初始值：normal
    可包含的值：
                             	 空白符           换行符          自动换行
        normal              	  合并             忽略            允许
        nowrap                    合并             忽略            不允许
        pre                       保留             保留            不允许
        pre-wrap                  保留             保留            允许
        pre-line                  合并             保留            允许

text-overflow

12. text-overflow
text-overflow属性指定当文本溢出包含它的元素，应该发生什么。
值	                描述
clip	            修剪文本。
ellipsis	        显示省略符号来代表被修剪的文本。
string	            使用给定的字符串来代表被修剪的文本。 

默认值：	clip
继承：	no
应用于： 块级 
版本：	CSS3
JavaScript 语法：	object.style.textOverflow="ellipsis" 

word-wrap

13. word-wrap
word-wrap属性允许长的内容可以自动换行。
默认值：	        normal
继承：	        yes
版本：	        CSS3
JavaScript 语法：	object.style.wordWrap="break-word"

值	        描述
normal	    只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

word-break

14. word-break
word-break属性指定非CJK脚本的断行规则。
默认值：	normal
继承：	yes
版本：	CSS3
JavaScript 语法：	object.style.wordBreak="break-all"

值	        描述
normal	    使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行