css整理－03 文本

缩进和水平对齐

缩进文本：text-indent

• 可以设置为负值
  
• 可以为所有块级元素应用，但无法应用到行内元素，图像之类的替换元素；

水平对齐: text-align

• left,center,right,justify
  
• 只应用到块级元素

垂直对齐

行高: line-height

• 指的是文本行基线之间的距离，而不是字体的大小；它确定了将各个元素框的高度增加或减少多少
  
• line-height值和字体大小只差就是行间距

文本行

• 文本行中的每一个元素都会生成一个内容区，这由字体的大小确定；
  
• 这个内容区会生成一个行内框(line-height)，行间距会影响行内框高度
  
• 行间距可以是负的，行间距+内容区=行内框

垂直对齐文本: vertical-align

• 值: baseline, sub, super, bottom, text-bottom, middle, top, text-top
  
• 只应用于行内元素和替换元素; 不影响块级元素中的内容对齐，不过可以影响表单元素中元素的垂直对齐
  
• 基线对齐: baseline: 子元素的基线和父元素的基线对齐;
  
• 上标和下标：sub,super,相对于基线，并没有明确的定义；距离取决于用户代理
  
• 底端对齐: bottom，将元素行内框的底端与行框的底端对齐；text-bottom: 指的事行内文本的底端;
  
• 顶端对齐: top, text-top
  
• 居中对齐: middle, 往往应用于图像
  
• 百分数：会把元素的基线相对于父元素的基线升高或降低
  
• 长度对齐： 同上，不过是具体的高度

字间隔和字母间隔

字间隔: word-spacing

字母间隔:letter-spacing

间隔和对齐

• 如果一个文本设置两端对齐且没有设置letter-spacing或设置为normal，则字母和字的距离会调整
  
• 如果设置了letter-spacing则不会受text-align影响

文本转换, text-transform

• uppercase, lowercase, capitalize

文本装饰, text-decoration

• underline,overline,line-through, blink,none
  
• 不被继承，但仍可能会有‘穿过’的现象

文本阴影

• text-shadow: color offset-x offset-y [blur-radius]
  
• color可以放在最前或最后
  
• 可以重复

处理空白符: white-space

• nowrap: 不允许自动换行，除非使用了br元素
  
• pre: 保留空格和换行,不允许自动换行
  
• pre-wrap: 保留额外的空格和换行，不允许自动换行
  
• pre-line: 保留换行，不保留额外空白，允许自动换行

文本方向: direction

• 值:ltr,rtl
  
• 影响块级元素中文本的书写方向，表中列布局的方向，内容水平填充其元素框的方向以及两端对齐元素中最后一行的位置
  
• 对于行内元素，只有unicode-bidi属性设置为embed或bidi-override时才会应用direction属性;