>首页> IT >

最新：详解CSS 文本属性（Text）

时间:2022-08-03 16:00:27       来源:转载
CSS Text（文本）属性用于定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本颜色，行间距等。本篇文章带大家了解一下CSS 文本属性（Text），希望对大家有所帮助！

CSS 文本属性（Text）

用于属性名CSS 版本浏览器支持继承性默认值
① 颜色的前景色 (文本/文本装饰/边框/当前颜色的 颜色) 。color1都支持。IE 所有版本 不支持属性值“inherit”。yesnot specified
② 文本的书写方向。文本/表列/水平溢出的 方向 (文本方向 可用标签的 dir属性 替代)。direction2同上。yesltr
③ 标点字符 是否位于线框之外。属性: 悬挂标点的 位置和符号 (实验中 属性)。hanging-punctuation3safari 10.1+支持，其他 都不支持。yesnone
④ 字符间距 (字符之间的 额外空白/空间)。letter-spacing1同上。yesnormal
行高。设置 行高/行间距 (一行多高,影响 行之间的 距离) 。line-height1同上。yesnormal
⑤ 标点字符 修剪。punctuation-trim3都不支持。yesnone
⑥ 文本 水平对齐 方式。text-align1都支持。IE 所有版本yes如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。 不支持属性值“inherit”。
⑦ 文本最后一行 水平对齐方式 (搭配 direction,text-align属性)。text-align-last3IE11+,edge14+部分支持，FF52+ chrome49+ opera45+支持，safari不支持。yesauto
⑧ 文本 装饰(线)。text-decoration1同上，且IE、Chrome 或 Safari 不支持 “blink” 属性值。nonone.(块元素 首行) 文本的 缩进量 (空白长度)。
⑨ 添加 文本强调符号(形状,颜色,位置) 。text-emphasis3IE，Edge 不支持，FF52+ safari10.1+ 支持，chrome49+部分支持。nonone
⑩ 文本两端对齐的 空间分隔方式 (搭配text-align属性)。text-justify3IE11+，edge14+部分支持，FF55+支持，其他不支持。yesauto
⑪ 文本的阴影 (影响 装饰线 text-decoration)。text-shadow2都支持。IE 10及以上才支持。yesnone
文本 大小写转换。text-transform1都支持。IE 所有版本 不支持属性值“inherit”。yesnone
⑫ 文本的轮廓。text-outline3都不支持。yesnone
⑬ 隐藏文本溢出时 的显示 (搭配 overflow,white-space,display属性)。text-overflow3都支持，不需要前缀。noclip
⑭ 文本添加阴影。text-shadow3都支持，IE10+支持yesnone
⑮ 文本的换行规则。text-wrap3都不支持。yesnormal
⑯ 双向文本的 重写/覆盖 (搭配 direction属性)。unicode-bidi2yes
⑰ 空白和换行的 处理。white-space1都支持。IE 所有版本 不支持属性值“inherit”。yesnormal
⑱ 单词 换行/断行 位置 (能否 词内断行)。word-break3都支持。IE6+支持。yesnormal
⑲ 对长的不可分割的单词 进行分割并换行到下一行。单词 断行时的 断行位置 (断句/断行 方式)。word-wrap3都支持，IE6+yesnormal
⑳ 单词/字 之间的 距离。word-spacing1同上yesnormal

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;/* 颜色名称  values */color: red;color: orange;color: tan;color: rebeccapurple;/* 十六进制颜色  values */color: #090;color: #009900;color: #090a;color: #009900aa;/*  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%);/*  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。它 不能是 一个渐变色的值，渐变色 实际上是一种 图像了,而不是一种颜色.。
⑹ 文本颜色的 默认值取决于 浏览器⑺ 文本颜色 默认继承性被继承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;＝

: 两个效果 是一样的,dir: direction 的简写.
示例2: 改变 表格中 列的排列顺序css
.dirTest {    border: 1px solid;    width: 300px;    direction: rtl;    background-color: #d0d0d0;}.dirTest td, th {    border: 1px solid;}
html
        
            ①姓名            ②爱吃的水果名            ③爱好        
        
                            小明                                        葡萄                           乒乓球        
        
                            莉莉                                        苹果                        动漫
默认方向: 从左到右设置 从右到左
列的顺序 完全相反: 1,2,3 列,变成了 3,2,1 列等同值: direction:rtl=
可在标签的 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, lastfirst,force-end, last

⑸ 悬挂标点的 浏览器支持

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

⑴ 字符间距/ 字符间的空白定义了在 文本字符框 之间 插入多少空间属性设置 文本字符之间 的间距行为增加或减少 字符间的空白（字符间距）。letter-spacing属性字符间距 属性
⑵ 字符和字符框由于 字符字形 通常比其 字符框 要窄指定长度值时 ,会调整 字母之间 通常的间隔。
⑶ 字符间距的 语法letter-spacing: normal|length|inherit;
/* 关键字值 Keyword value */letter-spacing: normal;/* 长度值  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
        业精于勤是一个汉语成语，拼音是 yè jīng yú qín，意思是指 学业的精进 在于勤奋。出处唐·韩愈《进学解》：“业精于勤，荒于嬉；行成于思，毁于随。
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 multipliedby the element"s font size */line-height: 3.5;/* 长度值  values */line-height: 3em;/* 百分比值  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
    
业精于勤是一个汉语成语，拼音是 yè jīng yú qín，意思是指 学业的精进 在于勤奋。出处唐·韩愈《进学解》：“业精于勤，荒于嬉；行成于思，毁于随。
        
业精于勤是一个汉语成语，拼音是 yè jīng yú qín，意思是指 学业的精进 在于勤奋。出处唐·韩愈《进学解》：“业精于勤，荒于嬉；行成于思，毁于随。
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.5p的行高 = 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;/* 长度值  values */vertical-align: 10em;vertical-align: 4px;/* 百分比值  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
金无足赤,人无完人。出自宋·戴复古《寄兴》：“黄金无足色，白璧有微瑕。求人不求备，妾愿老君家。” 也比喻不能要求一个人没有一点缺点错误,应该严以律己,宽以待人。
No one is perfect, everyone will make mistakes,be strict with yourself and lenient toward others.
默认 水平对齐水平 两端对齐 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行内/(内联)元素: 基本上是 包装文本的 标签。它可以用来 把图片垂直放置在 一行文本中② 表格单元格: 垂直对齐 表格的单元格内容
⑶ 垂直对齐的 语法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;/*  values */vertical-align: 10em;vertical-align: 4px;/*  values */vertical-align: 20%;/* Global values */vertical-align: inherit;vertical-align: initial;vertical-align: unset;
⑷ 垂直对齐的 属性值Ⅰ.针对 行内元素的值

① 相对父元素 的值

这些值 使元素相对其父元素 垂直对齐❶ 父元素 基线(默认值) :baseline(基线 : 父元素基线)使 元素的基线 与 父元素的基线 对齐。被替换元素的 基线: 一些 被替换元素(如