文本属性

缩进与水平对齐

缩进文本

• text-indent
• 应用元素：块级元素
• 继承型： 继承
• 取值： 长度值或者百分数

p{ 
text-indent: 3em; /*相对于字体大小*/ 
text-indent: 10%; /*相对于包含块元素的宽度*/ 
text-indent: 10px;/*绝对长度*/ 
}

水平对齐

• text-align
• 应用元素：块级元素
• 继承性： 继承
• 取值：left | right | center | justify | inherit
  不影响元素的对齐，只影响内部元素

p{ 
text-align: left;(默认) 
text-align: center; 
}

垂直对齐

行高

• line-height
• 应用元素： 所有元素
• 继承型： 继承
• 取值： 百分数-相对于元素的字体大小，长度值**行内定义如下几条线：

Paste_Image.png

div{
 font-size: 10px;
 line-height:1em; 
} 
p{ 
font-size: 18px;
 }

Paste_Image.png

由于行高可以继承，导致段落行高小于字体高度
当父元素line-height指定值为一个数值时，所有子元素的行高会根据自身的font-size设置line-height

垂直对齐文本

• vertical-align
• 应用元素： 行内元素和表单单元格
• 继承性： 无继承
• 取值： 百分数-相对于元素line-height的值， 长度值
  • baseline 基线对齐:行内元素基线或者替换元素的底端与父元素基线对齐
  • sub supper 下标 上标：相对于父元素的基线进行向下/向上进行一小段的偏移，便宜距离由浏览器决定
  • bottom top 底端对齐 顶端对齐：元素的底端与父元素的行高底端对齐，元素的顶端与父元素的行高顶端对齐
  • middle 居中：行内元素的中点与父元素基线上方0.5ex处的点对齐，可以认为是中线对齐
  • 百分数：元素的基线相对于父元素的基线升高或者降低指定高度，指定的百分数是相对于该元素line-height的
  • 长度值：元素相对于父元素基线升高或者降低指定的长度值。如：vertical-align:5px;

所有垂直对齐的元素都会影响父元素的行高，行框要足够包含最高行内框的顶端与最低行内框的底端

字间隔和字符间隔

字间隔

• word-spacing
  • 应用元素： 所有元素
  • 继承性： 继承 - 取值： 长度值

字符间隔

• letter-spacing
• 应用元素： 所有元素
• 继承性： 继承
• 取值： 长度值

文本转换

• text-transform
• 应用元素：所有元素
• 继承性： 继承
• 取值：uppercase | lowercase | capotalize | none | inherit

文本装饰

• text-decoration
• 应用元素：所有元素
• 继承性： 不继承
• 取值： none | unserline | overline | line-through | blink | inherit

文本阴影

• text-shadow
• 应用元素：所有元素
• 继承性： 不继承

 p{
 text-shadow: green .4em 5px 10px; 
/*取值： x偏移 y偏移 模糊半径 颜色*/ 
}

处理空白符

• white-space
• 应用元素： 所有元素
• 继承性： 不继承
• 取值：
  • normal： 合并连续的空白符为一个，忽略元素中的换行 允许自动换行
  • nowrap: 合并连续的空白符为一个，忽略元素中的换行 不允许自动换行
  • pre： 保留连续的空白符为一个，保留元素中的换行 不允许自动换行
  • pre-line：合并连续的空白符， 保留元素中的换行 允许自动换行
  • pre-wrap: 保留连续的空白符为一个，保留元素中的换行 允许自动换行