详解CSS 文本属性（Text）

CSS Text（文本）属性用于定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本颜色，行间距等。本篇文章带大家了解一下CSS 文本属性（Text），希望对大家有所帮助！

CSS 文本属性（Text）

1. color 属性: 颜色的前景色 (文本/文本装饰/边框/当前颜色的 颜色)

• ⑴ 文本 和 边框 的 颜色
  • 设置 该元素的 文本和边框的颜色。【推荐学习：css视频教程】
    • color 属性
      • 文本/边框 颜色 属性
  • 元素的 前景色:
    • color设置 元素的 ❶ 文本 和 ❷ 文本装饰 (text-decoration) 的 前景颜色值
    • 并设置 当前颜色 ❸ currentcolor的值。
      • 间接值: currentcolor 可以用作 其他属性的 间接值，并且是 其他颜色属性(如 ❹ 边框颜色 border-color)的 默认值。
  • 颜色color属性设置了 一个 元素的前景色
    • = 文本的颜色: 在 HTML 中，显示的 就是元素 文本的颜色 和 颜色边框的颜色.
    • color:green,会 把边框和文字的颜色,同时设置为 绿色.
    • 边框的颜色 : 可以用border-color 覆盖/ 重新设置.
    • 

• ⑵ 光栅图像
  • 不受 前景色color 影响
  • 光栅图
    • = 位图(.jpg)、点阵图、像素图，简单的说，
    • = 像素构成的图: 最小单位 由像素构成的 图
      • 缩放失真: 只有 点的信息，缩放时 会失真
      • 每个像素 有自己的颜色，类似 电脑里的图片 都是像素图
        • 色块: 把图 放很大就会看到 点变成 小色块了

• ⑶ 前景色 和 背景色
  • ① 背景色
    • 就是你要做的 图片的底色
    • 默认白色
  • ② 前景色
    • 当前 构图，线条、填充等 颜色。
  • 背景色就是 纸张的颜色，前景色就是 画笔画出的颜色。

• ⑷ 前景色属性的 语法
  • color: color_name|hex_number|rgb_number|inherit;

/* 关键字值 Keyword values */
color: currentcolor;

/* 颜色名称 <named-color> values */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* 十六进制颜色 <hex-color> values */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* <rgb()> values ,逗号 可以换成空格,但是目前 最好别这么做,兼容性还没那么好*/
color: rgb(34, 12, 64);

/*rgb()中带不透明度值,浏览器支持度不好,用rgba()*/
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);

color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/* <hsl()> values ,逗号 可以换成空格,但是目前 最好别这么做,兼容性还没那么好*/
color: hsl(30, 100%, 50%);
/*hsl()中带 不透明度值,浏览器支持度不好,用 hsla()*/
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);

color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* Global values */
color: inherit;
color: initial;
color: unset;

• ⑸ 前景色color的 属性值
  • 关键点：颜色名称 十六进制 rgb代码 继承
    • ① 关键字(颜色名称): color_name,currentColor,transparent
      • 颜色值 为 颜色名称的颜色
      • （比如red）。
    • ② 十六进制: hex_number
      • 颜色值 为十六进制值的 颜色
      • （比如 #ff0000）
    • ③ rgb 代码: rgb(),rgba()
      • 颜色值为 rgb 代码的颜色
        • color: rgb(34, 12, 64);
        • color: rgba(34, 12, 64, 0.6);
    • ④ hsl 代码: hsl(),hsla()
      • color: hsl(30, 100%, 50%);
      • color: hsla(30, 100%, 50%, 0.6);
    • ⑤ 继承: inherit
      • 从父元素 继承颜色。
    • 注意: 值必须是 统一的颜色color。
    • 它 不能是 一个渐变色的值<gradient>，渐变色 实际上是一种 图像了,而不是一种颜色.。

• ⑹ 文本颜色的 默认值
  • 取决于 浏览器
• ⑺ 文本颜色 默认继承性
  • 被继承
  • yes

• ⑻ 前景色color的 浏览器支持

• 示例1: 把一段文字 设置成红色的 方法

color {
    width: 600px;
    border: 10px dashed;
    padding: 10px;
    /*把一段文字 设置成红色的 方法*/
    color: red;
    color: #f00;
    color: #ff0000;
    color: rgb(255,0,0);
    color: rgb(100%,0%,0%);
    color: hsl(0,100%,50%);

    /*设置 半透明的红色 = 不透明值 等于一半的 红色*/
    color: #ff000080;
    color: rgba(255,0,0,0.5);
    color: hsla(0,100%,50%,0.5);
}

红色	半透明的红色

2. direction 属性: 文本/表列/水平溢出的 方向 (文本方向 可用标签的 dir 属性 替代)

• ⑴ 文本/表列/水平溢出的 方向
  • direction属性 设置 文本、表列(table columns) 和 水平溢出 (horizontal overflow)的 方向。
    • 文本流向: 该属性设置 块级元素的基本 文本方向
      • (从左 流向右边,还是从右 流向左边,不改变 相邻文字之间的先后顺序,句号除外.)
    • 嵌入方向: 由 unicode-bidi 属性 创建的 嵌入方向。
    • 文本/块元素 默认对齐: 设置 文本/块级元素 的默认对齐方式
    • 单元格 流动方向: 单元格(表列) 在表行中 流动的方向。

• ⑵ 方向属性的 语法
  • direction: ltr|rtl|inherit;

/* 关键字值 Keyword values */
direction: ltr;
direction: rtl;

/* 全局通用的属性值 Global values */
direction: inherit;
direction: initial;
direction: unset;

• ⑶ direction方向的 属性值
  • 文本方向 关键点：从左到右流动 从右到左 继承
  • ① 从左到右(默认值): ltr
    • 内容 从左向右流动
    • 用于 从左到右书写的语言 (英语,汉语 和 大多数的其他语言)。
    • 文字先后顺序 不变:
      • 注意,改变的是 文本的流向,文字之间的前后顺序,是不会变化的.
  • ② 从右到左: rtl
    • 内容 从右向左流动。
    • 用于 从右向左 书写的语言(如 希伯来语(Hebrew) 或 阿拉伯语(Arabic) 等)
      • 不是 所有国家的文字,都是 从左到右的写的,就跟 中国的古文,从上往下写的一样,有的国家的文字方向,是从右到左写的)
  • ③ 继承父亲: inherit
    • 从父元素 继承 direction 属性的值。
    • 内容流动 从父元素继承。

• ⑷ CSS 的direction属性 和 html 标签的属性dir(标签中)
  • ① 文本方向 用标签的 dir 属性 :
    • 通常是在 文档中定义的 (例如，使用 HTML 标签的dir属性)，而不是 直接使用direction属性。
  • ② 单元格 不从表列 继承direction属性:
    • 与 HTML中 的 dir 属性 不同，direction 属性 不是从表列 继承到表单元格的，因为CSS 继承遵循 文档树，而 表单元格 位于行中，而 不是列中。
  • ③ 搭配使用:
    • 要使direction属性 对 行内元素 有影响，必须 unicode-bidi 属性的值 设置为 embed, override.
  • ④ 不受 all 属性影响:
    • direction 和 unicode-bidi 属性: 是唯独的两个 不受 all 属性 影响的属性。

• ⑸ direction的 浏览器支持
  • 

• 示例1: 把一段汉字,设置成相反的 从右到左的 方向.

.color {
    width: 450px;
    border: 10px dashed;
    padding: 10px;
    
    /*设置文本的方向*/
    direction: rtl;
}

默认的文本方向: ltr 从左到右	设置成 从右到左 direction: rtl;

• 从最后一行的 句号。的位置,可以看出
  • ① 文本的流向: 变成了 从左到右,变成了 从右到左排列
  • ② 文字之间的 前后顺序: 并没有改变
    • (因为那些 文字从右到左排列的语言,文字之间的顺序,也是不会变的,只是汉语 默认是左到右 书写顺序,所以反流向后 看上去 有点怪)
• direction: rtl; ＝ <p dir="rtl"> </p>: 两个效果 是一样的,dir: direction 的简写.

• 示例2: 改变 表格中 列的排列顺序
• css

.dirTest {
    border: 1px solid;
    width: 300px;
    direction: rtl;
    background-color: #d0d0d0;
}
.dirTest td, th {
    border: 1px solid;
}

• html

    	<table class="dirTest">
    	    <tr>
    	        <th>①姓名</th>
    	        <th>②爱吃的水果名</th>
    	        <th>③爱好</th>
    	    </tr>
    	    <tr>
    	        <td>

    	            小明
    	        </td>
    	        <td>
    	            葡萄
   	
    	        </td>
    	        <td>乒乓球</td>
    	    </tr>
    	    <tr>
    	        <td>
    	            莉莉
    	        </td>
    	        <td>
    	            苹果
    	        </td>
    	        <td>动漫</td>
    	    </tr>
    	</table>

默认方向: 从左到右	设置 从右到左

• 列的顺序 完全相反: 1,2,3 列,变成了 3,2,1 列
• 等同值: direction:rtl = <table class="dirTest" dir="rtl"> </table>
  • 可在标签的 dir 属性中设置.

3. CSS3 hanging-punctuation 属性: 悬挂标点的 位置和符号 (实验中 属性)

• ⑴ 悬挂标点的 位置和符号: hanging-punctuation 属性,美 /ˌpʌŋktʃuˈeɪʃn/
  • 指定 标点符号 应挂在 一行文本的开头 还是结尾。
    • 悬挂的标点符号 可以放在 行框外。
  • 实验中属性:
    • 这是一项实验技术
    • 在生产中使用之前，请仔细检查 浏览器兼容性表。

• ⑵ 悬挂标点的 语法
  • hanging-punctuation: none"first|last|allow-end|force-end;

/* 关键字值 Keyword values */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

/* 两个值 Two keywords */
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

/* 三个值 Three keywords */
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

/* 全局值 Global values */
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: unset;

• ⑶ 悬挂标点的 属性值
  • ① 不悬挂标点: none
    • 不在 文本首行的开头 或结尾的 行框之外 放置标点符号。
  • ② 首行开始 行框外: first
    • 元素的 第一个格式化行 开始处的 左括号或左引号 挂起。
    • 标点附着在 首行开始边缘之外。
  • ③ 末行结尾 行框外: last
    • 元素 最后一个格式化行 末尾的 右括号或右引号 挂起。
    • 标点附着在 末行结尾边缘之外。
  • ④ 对齐不合适 挂起: allow-end
    • 如果 行尾的 句号或逗号 在对齐之前 不合适，则挂起。
  • ⑤ 行尾的 句号逗号 挂起: force-end
    • 行尾的 句号或逗号 挂起。

• ⑷ 多值
  • hanging-punctuation属性 可被指定 多个值，可以是 一个值，两个值，或者 三个值。
  • 1个值: 使用 上面属性值中的 任何一个 关键字值。
  • 2 个值: 使用下列其中一项:
    • first 搭配 last, allow-end, force-end 中的一个
    • last 搭配 first，allow-end,force-end 中的一个
  • 3 个值: 使用下列其中一项:
    • first, allow-end, last
    • first,force-end, last

• ⑸ 悬挂标点的 浏览器支持

4. letter-spacing 属性 : 字符间距 (字符之间的 额外空白/空间)

• ⑴ 字符间距/ 字符间的空白
  • 定义了在 文本字符框 之间 插入多少空间
  • 属性设置 文本字符之间 的间距行为
    • 增加或减少 字符间的空白（字符间距）。
      • letter-spacing 属性
      • 字符间距 属性

• ⑵ 字符和字符框
  • 由于 字符字形 通常比其 字符框 要窄
  • 指定长度值时 ,会调整 字母之间 通常的间隔。

• ⑶ 字符间距的 语法
  • letter-spacing: normal|length|inherit;

/* 关键字值 Keyword value */
letter-spacing: normal;

/* 长度值 <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

/* 全局值 Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;

• ⑷ 字符间距的 属性值
  • 字符间距关键点：标准 长度值 继承
  • ① 标准/正常 间距 (默认): normal
    • 字符间 没有额外的空间
    • 当前字体的 正常字母间距。
    • normal≠ 0,需要时,浏览器可调整 字符间距:
      • 与值0不同，此关键字 允许用户代理 更改字符之间的 空格，以 调整/对齐 文本。
  • ② 指定 字符额外间距: length
    • 字符间的 固定空间
    • 指定(除了 字符之间的 默认间距之外的) 额外字符间的 空间。
    • 负值: 允许使用 负值，这会让 字符之间 挤得更紧。
      • 值可能是负数，但可能存在 特定于实现的限制。
        • 用户代理 不会为了 调整文本/对齐文字,而进一步 增加或减少 字符间的空间 (因为间距 设定成固定值了)。
  • ③ 继承父亲: inherit
    • 从父元素继承 letter-spacing 属性的值。

• ⑸ 字符间距的 默认继承性
  • 会被继承
  • yes

• ⑹ 字符间距 和 可访问性问题
  • ① 间距太大/小时, 变得不可读: 较大的 正或负字符间距值 将使单词样式 变得不可读。
    • 对于具有 非常大的 正值的 文本
      • 字母之间的距离 会非常远，以至于 单词看起来就像 一系列单独的、不连接的字母。
    • 对于具有 非常大的 负值的文本
      • 字母之间 会重叠到 无法识别单词的程度。
  • ② 根据字体 调整 字符间距:
    • 清晰的字母间距 必须根据具体情况 来确定，因为不同的字体 有不同的字符宽度。
    • 没有一个值 可以确保 所有字体 自动保持其易读性。

• ⑺ 字符间距letter-spacing 的 浏览器支持

• 示例1: 设置一段文字的 字符之间的间距值
• html

    	<p class="textTest">
    	    业精于勤是一个汉语成语，拼音是 yè jīng yú qín，意思是指 学业的精进 在于勤奋。出处唐·韩愈《进学解》：“业精于勤，荒于嬉；行成于思，毁于随。
    	</p>

• css

.textTest {
    width: 450px;
    border: 10px dashed;
    padding: 10px;
    /*字符之间的间距*/
    letter-spacing: normal;
}

正常间距 (默认值) normal	增加 0.2em的额外间距 letter-spacing: 0.2em;
减少 0.2em的额外间距 letter-spacing: -0.2em;	字符间距 不正常的字体(太大/太小) 2em, -0.9em

5. line-height 属性: 设置 行高/行间距 (一行多高,影响 行之间的 距离)

• ⑴ 行高/行间距: line-height 属性
  • ① 属性设置 行框的 高度。
    • ❶ 在块级元素上
      • 它指定 元素中 行框的最小高度。
    • ❷ 对于 非替换的 内联元素
      • 它指定 用于 计算 行框高度的 高度。
  • ② 影响 行间距: 会影响 文本行与行 之间的 距离
    • 行高 = 一个文字的中间, 到下一行 文字的中间 相差的距离
    • (或者 文字底部,到下一行 文字的底部的 距离)
    • 所以,行高的变化,也会影响 行距.
      • 行距 = 行高line-height- 字体大小font-size = 行高和字体大小的 差值
      • 注意区分 行间距和行距: 行高 = 行间距 ≠行距,行间距 是行高的别称.

• ⑵ 行高、基线、顶线、中线、底线 示例图

  

• ⑶ 行高/行间距的 语法
  • line-height:normal|number|length|%|inherit;

/* 关键字值 Keyword value */
line-height: normal;

/* 无单位值: 字体大小 font-size的倍数  Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;

/* 长度值 <length> values */
line-height: 3em;

/* 百分比值 <percentage> values */
line-height: 34%;

/* 全局值 Global values */
line-height: inherit;
line-height: initial;
line-height: unset;

• ⑷ 行高/行间距的 属性值

  • 标准，数字，长度值，百分比，继承。

  • ① 正常 行间距(默认): normal

    • 设置 正常的行高,取决于 用户代理。
    • 默认值: 桌面浏览器(包括 Firefox )使用的默认值 大约为1.2，这取决于 元素的 字体。

  • ② 一个数字(无单位),字体大小的 倍数: number(等同于 百分比值的简写)

    • 设置数字，行高 = 数字 x 当前的字体大小font-size。
      • 行高和继承问题: 在大多数情况下，这是 设置行高和 避免 继承导致的意外结果的 首选方法。
        • 比如,一级标题 h1不继承父元素 div的字体大小,段落 p却继承 父元素div的字体大小时
        • 此时, 容器内,就有两种不同的 字体大小的文本,如果设置一样的行高值,没办法同时满足两个子元素的 行高需要.
      • 优点: 当元素内的 子元素的文本 字体大小font-size 不同时,能设置 相对于 子元素的 当前字体大小的行高.

  • ③ 长度值: length

    • 设置 固定的行高。
    • 指定的 长度值 用于计算 行框高度。em 单元中 给出的值 可能会产生 意想不到的结果

  • ④ 字体大小的 百分比值:%

    • 相对于 元素本身的 字体大小font-size。
      • 行高 = 百分比 x 元素字体大小font-size。

  • ⑤ 继承父亲: inherit

    • 从父元素继承 line-height 属性的值。

  • 不能负值: 行高 不允许 负值,负值会被视作 无效值.

  • 默认行高/行间距:

    • 在大多数浏览器中默认行高，大约是
      • 110% ~ 120%。
      • 100% 的行间距
        • 则 上一行的字 紧贴着下一行的字，中间 没有距离。
        • 

• ⑸ 行高和字体大小: 行高line-height < 字体大小font-size时, 将出现 行距为负数的情况，也就是两行文字 将部分重合。
  • 

• ⑹ 行高的 继承性
  • 会被继承
  • yes

• ⑺ 行高 和 可访问性问题
  • 有助于 视力低下的人:
    • 对于 主要段落内容，行高的最小值为1.5。
      • 这将 有助于 视力低下的人，以及 有阅读障碍 等认知障碍的人。
  • 确保行高 按比例缩放:
    • 如果 对页面进行缩放 以增加文本大小，则使用 无单位值 纯数字 可确保 行高 按比例缩放。

• ⑻ 行高 line-height的 浏览器支持
  • 

• 示例1: 设置一段文字的 行高/行间距 (会影响行距)

.textTest {
    width: 450px;
    border: 10px dashed;
    padding: 10px;

    font-size: 16px;
    line-height: 1.5em;
}

默认 文本行高 = normal 值	绝对长度值 行高 line-height: 40px;
相对长度值 行高 1.5em = 150%	不带单位 纯数字 line-height: 1.5;

• 等同值: 当设置 同一个元素的行高时(内部 没有字体大小不同的 子元素): 1.5 = 1.5em = 150%
  • 行高 = 数值 x 元素的字体大小font-size,都是相对于 当前字体大小的 倍数.
  • 如果不是同一元素的行高,比如,间

• 示例2: 纯数字值 (无单位值) 和 em,%相对长度值的区别
  • 只对最外层的容器 div，进行 行高设置,内部的两个子元素 h1,p 都不设置行高,看下内部元素的行高变化
• html
  • 嵌套关系: div > h1 " p

    	<div class="textTest">
    		<h1>业精于勤是一个汉语成语，拼音是 yè jīng yú qín，意思是指 学业的精进 在于勤奋。出处唐·韩愈《进学解》：“业精于勤，荒于嬉；行成于思，毁于随。</h1>
    	    <p>业精于勤是一个汉语成语，拼音是 yè jīng yú qín，意思是指 学业的精进 在于勤奋。出处唐·韩愈《进学解》：“业精于勤，荒于嬉；行成于思，毁于随。</p>
    	</div>

• css

.textTest {
    width: 450px;
    border: 10px dashed;
    padding: 10px;

    font-size: 16px;
}

默认 文本行高 = normal 值	设置成 绝对长度值时: 25px (h1 的文本 行高太挤)
设置成 相对长度值: 1.5em = 150%	设置成 纯数字 不带单位: line-height: 1.5;

• ① 带单位的 行高:25px,1.5em= 150%=1.5 x 16px = 24px
  • 相当于 给div内部的两个子元素,应用了 一样 行高值,即使他们的字体大小不同
• ② 不带单位的 纯数字
  • 相当于 给两个子元素h1,p 分别设置了 相对于子元素自身字体大小的 行高
  • h1的行高 = h1的字体大小 x 1.5
  • p的行高 = p的字体大小 x 1.5
  • 优点: 当元素内的 子元素的字体大小 不同时,能设置 相对于 子元素当前字体大小的行高.

6. CSS3 punctuation-trim 属性: 标点修剪 (浏览器 都不支持)

• ⑴ 标点修剪: punctuation-trim 属性
  • 如果 标点位于 行开头或结尾处，
    • 或者 临近另一个 全角标点符号，
    • 是否 对标点符号 进行修剪。

• ⑵ 标点修剪的 语法
  • punctuation-trim: none"start|end|allow-end|adjacent;

• ⑶ 标点修剪的 属性值
  • 关键点：不修剪、修剪开启标志符号、修剪闭合标志符号。
  • ① 不修剪: none
    • 不修剪 开启或闭合 标点符号。
  • ② 修剪 开启标志符号: start
    • 修剪每行 结尾的 开启标点符号。
  • ③ 修剪闭合标点符号: end
    • 修剪每行结尾的 闭合标点符号。
  • ④ allow-end
  • ⑤ adjacent

7. text-align 属性: 文本 水平对齐 方式

• ⑴ 文本 水平对齐方式: text-align

  • text-align 属性 设置元素中的 文本的 水平对齐方式。

  • 行内内容(文本)的 水平对齐: 定义 行内内容（例如 文字）如何 相对它的 父块元素 对齐。

    • 并不控制 块元素 本身的对齐，只控制 块元素的 行内内容(文本)的对齐。
    • text-align不控制 文本的 最后一行:
      • 因为这一行 经常和其他行 长短不一,不适合一起控制 ?
      • 使用text-align-last 属性: 指定文本 最后一行的 水平对齐方式

  • 通过指定 行框 与哪个点对齐

    • 从而设置 块级元素的 文本 的 水平对齐方式。

• ⑵ 文本水平对齐的 继承性
  • 会被继承
  • yes

• ⑶ 文本水平对齐 text-align的 语法
  • text-align:left|right|center|justify|inherit;

/* 关键字值 Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
/*下方的属性值 支持度还不好 暂时不用少用*/
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* 表列中 基于字符的对齐 Character-based alignment in a table column */
text-align: ".";
text-align: "." center;

/* 块对齐值 Block alignment values (非标准语法 Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* 全局值 Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

• ⑷ 文本水平对齐的 属性值
  • ① 左对齐(默认值): left
    • 把文本 排列到左边。
    • 行内内容 对齐到 行框的左边缘。
      • 默认值：没有设置 direction:rlt时 的默认值.
  • ② 右对齐: right
    • 把文本排列到右边。
      • 行内内容 对齐到 行框的右边缘。
    • 设置文本流向 从右到左 direction:rlt时 的默认值.
  • ③ 居中对齐: center
    • 把文本 排列到中间。
      • 行内内容 在行框中 居中。
  • ④ 两端对齐: justify
    • 实现 两端对齐 文本效果。
      • 除最后一行外，文本的左右边缘 应与 行框的左右边缘 对齐。
  • ⑤ 继承父亲: inherit
    • 从父元素 继承 text-align 属性的值。
  • ★ 默认值
    • 关联属性: 与方向direction属性 相关联
      • 如果 direction 属性是 ltr，则默认值是left；
      • 如果 direction 是 rtl，则为 right。

• ⑸ 文本水平对齐text-align 和 direction属性的 关联影响
  • ① 没有设置 文本水平对齐 text-align的时
    • direction 属性,文本的流向 会影响 水平对齐的默认值.
      • direction:ltr,文本会 左对齐
      • direction:rtl,文本会 右对齐
  • ② 设置 文本水平对齐后
    • direction 只会改变 文本的流向,不会再影响 对齐方式.

• ⑹ 文本水平对齐 text-align的 浏览器支持

示例1: 设置一段文本的 水平对齐方式

.textTest {
    width: 400px;
    border: 10px dashed;
    padding: 10px;

    font-size: 16px;
    margin: 10px;
}

左对齐 text-align:left;	右对齐 text-align:right;
居中对齐 text-align:center;	两端对齐 text-align:justify;

• 示例2: 标准兼容的 方式 : 居中块元素本身 , 而不是居中 块元素的 内联/行内内容(即 文本)
  • 将 左右外边距,设置为自动 auto (下方 3 种设置方式,效果等同)
    • = ❶ margin: auto; = ❷ margin: 0 auto;
    • = ❸ margin-left: auto; margin-right: auto;
    • 把块元素,放在父元素的 正中间.

margin: 0 auto;

7.1 CSS3 text-align-last 属性: 文本最后一行 水平对齐方式 (搭配 direction,text-align 属性)

• ⑴ 文本 最后一行的 水平对齐方式: text-align-last
  • 描述的是一段文本中 最后一行 在被强制换行之前的 对齐规则。
  • 作用对象:
    • vertical-align 只对 行内元素、表格单元格元素 生效,不能用于 垂直对齐 块级元素。

• ⑵ 文本最后一行的 水平对齐text-align-last的 语法
  • text-align-last: auto | start | end | left | right | center | justify;

/* 关键字值 Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* 长度值 <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* 百分比值 <percentage> values */
vertical-align: 20%;

/* 全局值 Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

• ⑶ 文本最后一行 水平对齐 text-align-last的 属性值
  • ① 与text-align关联: auto
    • 受影响的行 按文本水平对齐text-align的值 对齐，
    • 两端对齐除外: 除非 文本水平对齐是 两端对齐 text-align: justify
      • 在这种情况下，效果与text-align-last: start是一样的,根据文本的方向 来决定.
  • ② 与 direction 关联,参考起点: start
    • 与 direction的设置有关。
      • ❶ 左对齐:
        • 如果文本展示方向 是从左到右direction :ltr，则 起点在左侧，则是左对齐；
      • ❷ 右对齐:
        • 如果文本展示方向 是从右到左direction :rtl，则 起点在右侧，则是右对齐。
      • ❸ 浏览器 默认方向: 如果没有设置 direction，则按照 浏览器文本的 默认显示方向 来确定。
  • ③ 与 direction 关联,参考终点: end
    • 与 上方start 值的 结果相反,是以 终点为参考的.
  • ④ 左对齐: left
    • 文本 对齐到 行框的左边缘。
  • ⑤ 右对齐: right
    • 文本 对齐到 行框的右边缘。
  • ⑥ 居中对齐: center
    • 文本 在行框中 居中。
  • ⑦ 两端对齐: justify
    • 最后一行文字的 开头与 行框的 左侧对齐，末尾与右侧对齐。
      • 文本应该 将它们的 左右边缘 对齐到 行框的左右内容边缘。

• ⑷ text-align-last 的 浏览器支持

  • 需要使用 浏览器前缀

• 示例1: 把一段内容的 文本水平对齐 保持左对齐,改变 文本最后一行的对齐方式

.textTest {
    width: 400px;
    border: 10px dashed;
    padding: 10px;
    margin: 0 auto;
    font-size: 16px;
    /*文本水平对齐*/
    text-align: left;

    /*文本最后一行 水平对齐*/
    text-align-last: auto;
}

① 默认显示	② text-align-last: auto;
③ 起点对齐 text-align-last: start;	④ 终点对齐 text-align-last: end;
⑤ 左对齐 text-align-last: left;	⑥ 右对齐 text-align-last: right;
⑦ 居中对齐 text-align-last: center;	⑧ 两端对齐 text-align-last: justify;

7.2 CSS3 text-justify 属性: 文本两端对齐的 空间分隔方式 (搭配 text-align 属性)

• ⑴ 文本两端对齐的 空间分隔方式: text-justify
  • 当 text-align: justify 时
    • 即 文本的 水平对齐方式 = 两端对齐 时的 分隔方式。

• ⑵ 文本两端对齐 分隔方式的 语法
  • text-justify: auto"inter-word|inter-character|distribute;

text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* 已废弃的属性值 Deprecated value */

• ⑶ 文本两端对齐 分隔方式的 属性值
  • ① 浏览器 自动决定 (默认值): auto
    • 浏览器决定 两端对齐 算法。
    • 这种对齐方式 将是 最适合某种语言文字的 排版（例如：英语，中文，日语，韩语等）。
  • ② 禁用 两端对齐: none
    • 禁用 两端对齐。
    • 表现的效果 和没有设置 text-align 一样
      • 当你因为某种原因 需要在已经设置了 text-align 的元素上 禁用 两端对齐效果的时候，可以使用.
      • 谷歌 chrome中没有这个效果,火狐浏览器中 有这个效果.
  • ③ 调整 单词间距离: inter-word
    • 增加/减少 单词间的间隔。
    • 在文本中的单词之间 添加空间 来实现行对齐（会改变 word-spacing 的值）
      • 比如 英语或韩语 最适合使用 这个属性值 来用 空格分隔单词 的语言。
  • ④ 调整 字符间距离: inter-character
    • 通过 在文本中的 字符之间 添加空间 来实现行对齐（会改变 letter-spacing 的值）
      • 比如 日语 最适合使用 这个属性值的语言。
  • ⑤ 分散: distribute (已废弃 属性值)
    • 美 [dɪ’strɪbjut]
    • 散布
    • 类似 报纸版面，除了在东亚语系中 最后一行是不齐行的。
      • 显示效果与设置了inter-wrod一致，不提倡使用 这个属性，现在这个属性 或许还能有效果，但那完全是为了 向后兼容而被保留着。

• ⑷ 文本两端对齐 分隔方式的 浏览器支持

  • 实验中属性,行为可能会发生变化

• 示例1:给一段文本设置 两端对齐的水平对齐,并设置 两端对齐时 空间的分隔方式

• css

.textjustify{
    width: 30%;
    background-color: #d0d0d0;
    padding: 10px;	
    border: solid black 2px;
    font-size: 1.2em;	

    /*text-align: justify;*/
    /*text-justify:auto;*/
    /*text-justify:none;*/
    /*text-justify:inter-word;*/
    /*text-justify:inter-character;*/
    /*text-justify:distribute;*/

}

• html

    <p class="textjustify">金无足赤,人无完人。出自宋·戴复古《寄兴》：“黄金无足色，白璧有微瑕。求人不求备，妾愿老君家。” 也比喻不能要求一个人没有一点缺点错误,应该严以律己,宽以待人。<br />No one is perfect, everyone will make mistakes,be strict with yourself and lenient toward others.</p>

默认 水平对齐	水平 两端对齐 text-align: justify; ( 默认= text-justify:auto;)
禁用 两端对齐 text-justify:none;	调整 单词间距离 inter-word
调整 字符间距离 inter-character	分散 distribute (已废弃属性值)

• 文本两端对齐的分隔方式
  • 浏览器自动决定 auto ,会根据语言 自行进行空间分隔
    • 所以后面的 调整 单词间距离(英语中),调整字符距离 (汉语中),效果看上去 区别不大.

7.3 vertical-align 属性: 垂直对齐方式 (针对 行内元素,表格单元格内容)

• ⑴ 垂直对齐 方式: vertical-align,美 ['vɝtɪkl]
  • ① 指定 行内元素（inline）或 表格单元格（table-cell）元素的 垂直对齐方式。
  • ② 在表单元格中
    • 垂直对齐属性 会设置 单元格内容的 对齐方式。
  • ③ 块级元素的垂直对齐: 不使用 vertical-align.
    • 可以设置 块的行高 = 高度
    • 块中的文字垂直居中:line-height = height

• ⑵ 垂直对齐 使用范围
  • vertical-align 只对 ❶ 行内级的元素(inline-level elements)、❷ 表格单元格元素 生效：不能用它 垂直对齐 块级元素
    • ① 行内元素: 将 内联元素的框 垂直对齐到 包含它的 行框中。
      • 行内级元素(inline-level elements):
        • 内联级元素 按行排列。
          • 创建新行: 一旦元素的数量 超过了当前行 所能容纳的数量，就会在当前行下方 创建新行。
          • 行框: 所有这些行 都有一个所谓的 行框，它包含 该行的所有内容。
            • 不同大小的内容 表示 不同高度的行框。
      • display =
        • ❶ inline
        • ❷ inline-block
          • 内联的块元素
          • 可以有宽度和高度(可能由它自己的内容定义)以及内边距、边框和外边距。
        • ❸ inline-table
        • 行内/(内联)元素: 基本上是 包装文本的 标签。
      • 它可以用来 把图片<img> 垂直放置在 一行文本中
      • 
    • ② 表格单元格: 垂直对齐 表格的单元格内容
      • 

• ⑶ 垂直对齐的 语法
  • vertical-align: baseline | sub | super | top | text-top | middle | bottom| text-bottom | length | % |inherit;

/* Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

• ⑷ 垂直对齐的 属性值
• Ⅰ.针对 行内元素的值

  • ① 相对父元素 的值

    • 这些值 使元素相对其父元素 垂直对齐
    • ❶ 父元素 基线(默认值) :baseline
      • (基线 : 父元素基线)
      • 使 元素的基线 与 父元素的基线 对齐。
        • 被替换元素的 基线: 一些 被替换元素(如<textarea>)的基线 ,没有由 HTML规范指定，这意味着 它们对这个关键字的行为, 在不同的浏览器之间 可能有所不同。
    • ❷ 父元素的 下标基线: sub
      • (基线 : 父元素 下标基线)
        • 使 元素的基线 与 父元素的下标基线 对齐。
    • ❸ 父元素的 上标基线: super
      • (基线 : 父元素 上标基线)
        • 使 元素的基线*与 父元素的下标基线 对齐。
    • ❹ 父元素 文本顶部: text-top
      • (顶部 : 父元素 文本顶部)
        • 使 元素的顶部 与 父元素的 字体顶部 对齐。
    • ❺ 父元素 文本底部: text-bottom
      • (底部 : 父元素 文本底部)
        • 使 元素的底部 与 父元素的字体底部 对齐。
    • ❻ 父元素的 中线: middle
      • (中线 : 父元素中线)
        • 使 元素的中部 与 [父元素的基线 + 父元素x-height(x的高度)的一半] 对齐。
      • 
    • ❼ 父元素的基线 (位移的 指定长度值): length
      • (基线 : 父元素基线)
        • 使 元素的基线 对齐到 父元素的基线之上的 给定长度。可以是 负数。
    • ❽ 父元素基线 (位移的 行高的 指定百分比值): %
      • (基线 : 父元素基线,行高百分比)
        • 使用 “line-height” 属性的百分比值 来排列此元素。
      • 使 元素的基线 对齐到 父元素的基线之上的 给定百分比
        • 该百分比值 是 行高line-height属性的 百分比。
      • 负值: 默认向上位移, 负值表示 方向相反, 向下位移.

  • ② 相对行的 值

    • 下列值 使元素 相对整行 垂直对齐：
    • ❶ 整行的顶部: top
      • (顶部 : 整行的顶部)
      • 把元素的顶端 与行中 最高元素的顶端 对齐
        • 使 元素 及其后代元素的顶部 与 整行的顶部 对齐
    • ❷ 整行的底部: bottom
      • (底部 : 整行的底部)
      • 把元素的底端 与行中 最低的元素的 底端对齐。
        • 使 元素 及其后代元素的底部 与 整行的底部 对齐。
        • 对于 没有基线的元素，则使用 外边距的下边缘 代替。

  • ③ 属性值 的正负

    • 允许指定 负长度值和百分比值。
      • 使元素 降低 位置而 不是升高。
• Ⅱ. 针对 表格 单元格内容 的值
  • ① 单元格 基线相互对齐: baseline (以及 sub, super, text-top, text-bottom, <length>, <percentage>)
    • (单元格基线 : 单元格基线)
      • 使 单元格的基线，与 (该行中 所有 以基线对齐的) 其它单元格的基线 对齐。
      • 将 单元格的基线 与 (基线对齐的行中的) 所有 其他单元格的基线 对齐。
  • ② 行的顶部 对齐: top
    • (内边距框的顶部 : 行的顶部)
      • 使 单元格的 内边距的 上边缘/顶部 与 该行的顶部 对齐。
  • ③ 行的居中 对齐: middle
    • 使 单元格 内边距框 在该行内 居中对齐。
  • ④ 行的底部 对齐: bottom
    • (内边距框的底部 : 行的底部)
      • 使 单元格内边距的下边缘/底部 与 该行底部 对齐。
  • ⑤ 可以负值: 可以是负数。

• ⑸ 文字基线
  • 像西文字母 坐在基线(小写字母x的下边缘)上一样，
  • 汉字和标点符号 也都坐在 汉字基线上。
    • 汉字基线
      • 比汉字字面的 下边缘要高。
    • 基线: （baseline）是
      • 西文字体设计与排版的概念
      • 源自 西文字母的 主体底部 对齐的位置。
• super
  • superscript
    • 英 ['suːpəskrɪpt; 'sjuː-]
  • adj. 标在上方的
  • n. 上标

• ⑹ 垂直对齐 vertical-align的 浏览器支持

• 示例1: 将 内联元素的框 垂直对齐到 包含它
• css

.verticalTest{
	width: 700px;
	text-decoration: underline overline;
	font-size: 1.5em;
	/*line-height = font-size x 1.5 = 1.5em x 1.5 = 1.5 x 16 x 1.5*/
	line-height: 1.5em;
	background-color: #d0d0d0;
	padding: 10px;

	border: 2px solid green;


}
.verticalTest img{ 
	/* 10px/16px = 0.625 */
	margin-right: 0.625em;

}

• html

    <p class="verticalTest">
        baseline:
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:baseline" />
        sub:
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:sub" />