css整理-03 文本

时间:2022-12-31 10:06:22

缩进和水平对齐

缩进文本: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属性设置为embedbidi-override时才会应用direction属性;