块级方向与行内方向
块级方向:当前书写模式放置块级元素的方向。例如:中文中的段落是从上到下放置的,块级方向就是自上而下,纵向的。
行内方向:块级元素中的行内元素的书写方向。例如:现代中文段落中的文字是从左到右书写的,那行内方向便为自左而右。反之古代牌匾是自右而左。
首行缩进text-indent
作用
该属性能定义一个块元素首行文本前的缩进量。
属性值
<length>:使用固定的值指定缩进量。可以使用负值,这样表示前移首行。<percentage>:使用当前块元素的宽度的百分比作为缩进
初始值、可动画性与可继承性
初始值为0,可动画、可继承
适用场景
可以用在任何块级元素上,缩进会延行内方向展开。
但是无法用在行内元素或置换元素【例如图像、之类的】上。
文本对齐text-align
作用
该属性控制块级元素中各行内文本的对齐方式。【只控制内容,不控制它本身】
适用元素
块级元素
初始值、可动画性与可继承性
不可动画、可继承
初始值为start,或者一个无名值,该无名值的效果为:如果浏览器不支持 start,且 direction 为 ltr,则为 left; 如果 direction 为 rtl,则为 right
属性值
- start :如果行内方向是左至右,则等于
left,反之则为right - end :与start相反
- left : 行内内容向左侧边对齐
- right :与left相反
- center :内容局中
- justify : 文字向两侧对齐,对最后一行无效。
match-parent和inherit类似,区别在于start和end的值根据父元素的direction确定,并被替换为恰当的left或right。【但是inherit则计算值为父元素的值,不会进行转换】justify-all和 justify 一致,但是强制使最后一行两端对齐。
其中 justify 与 justify-all 的效果是:文本的两端要和父元素的content边界对齐,单词和字母之间的空白会做调整,保持每一行长度完全一致。
对于left和right碰到块级方向为纵向的元素时,left对应起边,right对应终边
对其最后一行text-align-last
作用
一段文本【此处的一段文本指的是换行元素<br>的前面的文本或是块元素中的文本】中最后一行在被强制换行之前的对齐规则。
适用元素、可继承性与可动画性
块级元素,可继承,不可动画
属性值
- auto:当
text-align的值为非justify时,该属性指定的对其方向和text-align指定的对其方向一致,否则,效果和该属性的值设置为start一样。 - start:当文本方向为ltr时,左对齐,文本方向为rtl时,右对齐。
- end:与start相反
- left:对齐行框的左边界
- right:与left相反
- center:向行框的中央对齐。
- justify:文本的边缘应该跟段落的左右边界线对齐。造成的效果如下图1最后一行,文字间距明显拉开,但是若是一个单词则单词的字母间距不会拉开,效果如图2;但是单词间的间距会拉开,效果如图3