首先，我们来了解一下CSS是如何设置文本的对齐方式的。使用CSS，您可以设置文本的水平和垂直对齐方式。（有案例效果演示）文本的水平对齐，我们在之前的课程中已经接触过——使用text-align样式属性来实现。它有三个属性值：left、right、center，分别表示文本水平向左、向右、居中。让我们举个例子。在005目录下创建alignment-spacing.html文件，构建基础代码，添加一个h1元素和三个p元素，分别填写一些文本。
西西老师，学前端的大学生就业难吗？
不，不难，只要你在能力、项目经验、人品上通过测试，公司就会录用你。
面试时可以重点介绍自己的开发能力、技术能力和对技术的理解，这样别人挑不出毛病，学历自动忽略。
我采访别人的时候也是这样。如果这个人的技术能力和过往经历真的征服了我，我真的不在乎他的学历。
我们可以为三段文字设置不同的水平对齐方式，为三个p元素定义class属性，分别取值a、b、c。在该目录下再创建一个mystyle-2.css文件，定义p.a（读作p点a）选择器，声明样式text-align:left（不读冒号）。定义p.b选择器并声明样式text-align:center。定义p.c选择器并声明样式text-align:right。p.a{text-align:left;}p.b{text-align:center;}p.c{text-align:right;}在浏览器中预览效果，三个段落分别左对齐、居中对齐、右对齐。当text-align属性设置为justify[?d??st?fa?]时，每行被拉伸，使每行宽度相等，左右边距对齐，就像杂志和报纸的布局一样。注释掉所有样式，定义p选择器，声明样式text-align:justify。看看吧，好像没什么效果。为了演示，在第一段中添加单词no,（在英语中发音为逗号）。然后为p元素声明一个样式width:200px。再看效果，三段两边对齐。如果把这个样式注释掉，很明显，右侧不再对齐了。除了水平对齐方式，您还可以设置文本的垂直对齐方式。通过声明vertical-align属性来做到这一点。有五个值：baseline、baselinealignment。文本顶部，文本顶部对齐。text-bottom，文本底部对齐。sub，下标对齐。超级，上标对齐。在html文件中添加一个h1元素和5个p元素。填写一些文字。在每段开头添加一个img元素，并引入一张宽高为9px的局部小图。为每个图像元素定义一个class属性，值为a,b,c,d,e。在样式表中，定义img.a选择器并声明样式vertical-align:baseline。基线如何对齐？看效果，好像是在垂直方向居中。其实baseline是根据四行三格的倒数第二行来对齐的。仅对英文文本有意义。比如把1改成打1，基线就在这里，文中的图片就以此为基准对齐。定义四个选择器img.b、img.c、img.d、img.e，并为其声明vertical-align属性，取值分别为text-top、text-bottom、sub、super。看看效果。在垂直方向上，图片已经相对于文字的上、下、上标、下标的位置进行了对齐。接下来，我们学习如何设置文本的间距。使用CSS，您可以实现文本缩进、单词或字母间距、行高、单词间距和空格处理。（有案例效果演示）说起文字缩进，大家还记得如何实现自然段落首行的缩进吗？可以发个弹幕告诉大家！这也可以通过声明CSStext-indent属性来实现。使用长度值或百分比来设置文本缩进。长度值可以是绝对单位或相对单位。绝对单位是px，比如缩进50px；最常用的相对单位是em，缩进的宽度是字符宽度的倍数。一般设置为2em，即两个空格。字符宽度——如果是方块字，也可以称为字体大小，通过font-size属性设置，后面CSS字体课程中会详细介绍。百分比缩进宽度是根据父元素的宽度计算的。这很少使用。在值为2em的p元素上声明text-indent属性。仔细观察，每个自然段落的缩进好像都不是2个字宽，这是为什么呢？你应该想到了，注释text-align:justify就是我们想要的效果。letter-spacing属性用于指定中文文本或英文字母之间的间距。在样式中，定义h1选择器并声明样式letter-spacing:5px。这样，标题文本之间就有一个5px的空间。line-height属性用于指定行与行之间的高度，即行高。常用的属性值有3个：第一个是normal，也是默认值，浏览器会根据字符大小自动设置一个行高。第二，一个数字，例如1.5。该数字是通过乘以当前字符大小计算得出的。推荐使用。三、绝对值，比如20px，-5px。设置固定的行间距。当没有设置line-height属性时，我们看到每行的间距是这样的。回到样式代码，为p元素声明样式line-height:normal。我们认为效果没有变化。修改line-height属性值为1，再看，每段的行间距都消失了。再次修改line-height为10px，线条叠加在一起。是不是和你理解的行高不一样？看来还需要仔细研究一下：行高是怎么算出来的。这是两行中英文混合的文字。在文本顶部画一条线并将其称为Topline。在文本底部画一条线并将其称为底线。在正文中间画一条线，称之为中线，画一条英文基线。上一行文本的底线和下一行文本的顶线之间的间距称为行间距。其实line-height设置的行高值就是两条线的基线之间的距离。这里你可能会问，baseline不是英文文本特有的吗？其实不管文中有没有英文，baseline总是存在的。理解了这个原理，就可以理解line-height：1、为什么没有行间距。因为1乘以文字的高度，结果还是文字的高度。文本的高度正好等于两条线的基线之间的距离，所以行间距为0。word-spacing属性用于指定文本中单词之间的间距，只对英文有效。为p元素声明一个word-spacing:20px样式。让我们看看，no和fight之后有一个20像素的间距。white-space属性指定如何处理元素内的空白。有一个常用的值，nowrap，不管包含文本的元素的宽度是多少，文本在遇到标签之前不会换行。为p元素声明white-space:nowrap样式。此时，每个段落都显示在一行中。虽然我们为p元素声明了width:200px，但是它会忽略它，继续顽固地显示在一行中。文章配套视频链接：https://www.bilibili.com/video...