CSS中的缩进和行内对齐 – 我的笔记本

CSS中的缩进和行内对齐

缩进文本

text-indent

  • 取值:<length> | <percentage>
  • 初始值:0
  • 适用于:块级元素
  • 百分数:相对于所在块级的宽度
  • 计算值:百分数如上;长度值得到绝对长度
  • 继承性:是
  • 动画性:是

text-indent属性把元素的第一行文本缩进指定的长度,缩进的长度可以是负值。这个属性通常用于缩进段落的第一行

// 这个规则把段落的第一行缩进3em
p {
  text-indent: 3em;
}

text-indent属性可以用在任何块级元素上,缩进将沿着行内方向展开。text-indent属性不能用于行内元素置换元素(如图像)。然而,如果图像在块级元素的第一行里,它将随行中的其他文本一起后移。如果想“缩进”行内元素的首行,可以通过内边距或外边距实现。

text-indent属性的值可以使负值,这样可以实现一些有趣的效果。最常见的用法是实现悬挂缩进,即首行相比元素的其他内容悬挂在一边。
p { text-indent: -4em }
使用负值时要小心,以防前几个词被浏览器窗口的边缘吃掉。为避免出现这种显示问题,建议加上外边距或内边距:
p { text-indent: -4em; padding-left: 4em; }

text-indent属性的值可以使用任何长度单位,包括百分数。百分数相对父元素的宽度计算缩进量。也就是说,如果把缩进值设为10%,受其影响的元素的首行缩进的量为父元素宽度的10%。注意,文本缩进只影响元素的第一行,即使有换行也是如此。text-indent会继承,因此可能会出现预料之外的效果。

文本对齐

text-align

  • 取值:start | end | left | right | center | justify | match-parent | start end
  • 初始值:在CSS3中是start;在CSS2.1中,由用户代理指定,有可能根据书写方向而定
  • 适用于:块级元素
  • 计算值:指定的值,match-parent除外
  • 继承性:是
  • 动画性:否

Related Posts

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注