前言

文本是网页编程中的重要元素，提供了很多的相关的属性操作，以不同的方式配合来控制文本的展示，比如可以影响文本中相对一行中其他内容的内置，可以将文本设置为上标等等，
针对平时常用的文本属性的学习，加深对文本属性的使用，结合几个常见的文本效果的学习，领略文本属性的魅力！！！！
最最最主要的是，我不想一遇到稍微有一点点特殊的文本样式，就是度娘，对自己没有半毛钱提升！！！

行内与块级傻傻分不清

元素 外观 height/line-height/margin 宽度 容纳元素
块级元素 总是在新的一行开始 可控制 默认100% 容纳行内元素以及其他块级元素
行内元素 和其他元素在同一行上 不可控制 文字/图片宽度，不可变 正常只能容纳文本或其他行内元素

缩进

text-indent: 50px;
规定文本块中首行文本的缩进尺寸

值 描述
取值 定义的固定的缩进值，默认是0
初始值 0
适用于 块级元素
继承性 是

对齐

行内对齐

根据文字的书写方向，来控制元素中文本行的对齐方式

text-align/text-align-last
值 描述
取值 start/end/left/right/center/justify
默认值 由用户代理决定
适用于 块级元素
继承性 是

✨ 比如要实现一个文本节点的两端对齐效果(如下图所示)：
两端对齐效果

1
2
3
4
5
6
7
8
9
<body>
  <h4>This is heading</h4>
</body>
<style>
  h4{
    text-align: justify;
    text-align-last: justify;
  }
</style>

🪐 首先要实现一个元素两端对齐，它进适用于块级元素，一般需要设置其所在容器的宽度，另外，需要设置元素的text-align-last属性，当其只有一行的时候，也能够当作最后一行来实现两端对齐效果

块级对齐

沿着块级方向的对齐方式

✨ 在开始进行这块领域的知识的学习之前，先来了解关于一些重要的概念以及对应在界面上的视图效果

行高

指的是基线之间的距离，与字号无关，决定元素所在方框的高度是增还是减。
🤔 这里为啥要决定元素所在方框的高度的增减，有什么作用呢？留到👇来回答！
⚠️ 行高line-height并不能增加行之间的纵向空间，行高控制的是行距，就是除字体高度之外在文本行上方的额外空间，也就是与字体高度之差

值 描述
取值 number/length/percentage/normal
默认值 normal
适用于 所有元素(但置换元素与块级元素之前有一定的区别)
继承性 是

⚠️ 对于块级元素而言，line-height就是定义元素中文本行基线之间的最小距离，这里的最小距离并不是定死的值，基线之间的距离，可能会比设置的line-height
的值要大，这里因为块级元素中如果包含了一个置换元素/行内元素/其他块级元素，而子元素这个时候如果也设置了它自身的font-size + line-height，且都比
父元素要大，这个时候就会撑开原本父元素定义的line-height的高度，因此这里父元素所定义的只是一个最小行高而已！！！

🪐 关于文本行的构成，这里需要详细说明一下

文本行中的每个元素构成一个内容区，其高度由字体的高度决定，随内容区出现的是一个行内框，如果不考虑其他的因素，其高度与内容区完全相等。
而line-height导致的行距是影响行内框高度的因素之一。

元素的行距等于font-size的计算结果减去ling-height的计算结果，这个值是行距的总值，⚠️行距可能为负数，行距分为两部分，分别放到元素的
上部和下部，算上行距，得到的就是元素的行内框。

👆这里提及到那么多的概念，刚开始看着的时候基本上是一脸懵逼的，👇这边以一个效果图来分析一下上面所提及到的相关概念：

行高内容划分

通过👆的关于行高内容的划分，对于基线、行距、行框、内容区的相关概念以及对其中的位置关系，
🤔 那么上述图中为啥line-height的高度就是18px，而行距为4px呢？？
✨ line-height的值默认是normal的，当使用这个值的时候，行之间的空间由用户代理来计算，一般是字体高度的1.2倍左右，也同时说明了平时我们在使用
文字展示的时候，文字与文字之间默认由一定的间距，假如想要控制的化，这个时候就需要使用line-height来加以控制

🪐 这里为什么花不小的篇幅来整，是因为从根本上了解了关于这个行框的知识点，从根本上了解到关于一行中文本的分布，特别是学习了关于元素高低不同展示的原因！！

行高的继承
块级元素之间行高的继承，如果从父元素继承line-height时，根据父元素的字号来计算的，而不是从子元素
比如有一下的

行高的继承

👆这里p的所获取到的行高是从父元素中继承而来的，因为控制了该内容的行高，因此会出现上述的p段落内容挤压到了一起

✨ line-height中有一种数值类型是一个number，它代表的是一个倍数，代表的意思是—>
将纯数字应用到当前元素以及其所有的子元素中，因此各元素的行高将根据自身的字号计算

倍数行高控制自身

✨ 假如元素的字体设置为：font-size: 12pt，然后对应设置line-height: 16pt，那么则代表该字体的间距则为16-12=4pt，
然后将这个4pt一分为二，分别放到元素的上方和下方，然后就得出基线之间的距离为最终16pt

纵向文本对齐

通过👆针对行框的学习，知道了关于css中如何布局一行的文本，而通过对行内元素/置换元素的学习，可以控制子元素自身的位置布局，
因为这里的vertical-align属性主要是针对基线来进行对行内元素进行位置的控制的

值 描述
取值 baseline/sub/super/top/text-top/middle/bottom/text-bottom/length/percentage
默认值 baseline
适用于 行内元素/单元格
继承性 否

⚠️ vertical-align不影响块级元素中文本的对齐方式，但可以控制单元格中元素的纵向对齐方式，👇具体描述描述每一个属性值的使用

  1. 基线对齐(baseline)

    vertical-align的默认值，强制元素的基线与父元素的基线对齐，正常情况下一行文本中所有元素的底端应当对齐

  2. 上标和下标(sub and super)

    sub把元素放在下标处，也就是当前元素的基线低于父元素的基线；
    super把元素放在上标处，也就是当前元素的基线高于父元素的基线；

通过这里的vertical-align，我们可以很方便的实现一些数学公式，如下图所示：
数学公式

  1. 底端对齐与顶端对齐(bottom and top)

    bottom把元素放在所在行内框的底边与行框的底边对齐
    top把元素放在所在行内框的顶边与行框的顶边对齐

这里以一个图片置换元素来展示效果比较明显
img置换元素默认底边与基线对齐

而使用了vertical-align=bottom时的效果如下
设置了行内对齐为底部对齐

  1. 文本底部对齐与文本顶端对齐(text-bottom and text-top)

    text-bottom相对于行中文本的底边对齐
    text-top相对于行中文本的顶部对齐

  2. 中线对齐

    middle一般用于图像上，把行内元素所在的方框的中线于父元素的基线向上偏移0.5ex处对齐

  3. 百分数

    把元素的基线相对于父元素的基线抬升或下沉制定的量(根据line-height的占比来计算)

间距

  1. 单词间距(word-spacing)
  2. 字符间距(letter-spacing)

文本转换、装饰、阴影

  1. text-transform
  2. text-decoration
  3. text-shadow

空白处理

  1. white-space
值 描述
取值 normal/nowrap/pre/pre-line
适用于 全部元素
默认值 normal
继承性 否

针对上述中取值的不同范围，以下对比一下每个属性的效果：

取值 空白 换行符 自动换行
pre-line 折叠 保留 允许
pre 保留 保留 禁止
pre-wrap 保留 保留 允许
normal 折叠 忽略 允许
nowrap 折叠 忽略 禁止
  1. tab-size

断字处理

  1. word-break

    控制不同语言处理文本的软换行方式，何谓软换行：如果一串文本太长，一行放不下，就会自动软换行

  2. line-break
  3. overflow-wrap(原word-wrap)
    ⚠️ 只有white-space允许换行时，overflow-wrap才会起作用

常见文本效果

  1. 文本固定函数，超出部分以省略号展示
    控制文本多行展示

适用范围：
因为适用了WebKit的CSS扩展属性，因此该方法仅适用于WebKit浏览器以及移动端；
注：
a. -webkit-line-clamp: 用来限制在一个块元素显示的文本的行数，为了实现该效果，一般需要结合其他的WebKit属性；
b: -webkit-box: 必须被👆所结合的属性，将对象作为弹性伸缩盒子模型显示；
c: -webkit-box-orient: 必须被👆结合的属性，设置或检索伸缩盒子对象的自元素的排列方式

  1. 文字描边，利用阴影来实现的效果，其实也就是使用1px的阴影效果往文字四周添加1px的效果

    1
    2
    3
    4
    5
    6
    7
    8
    div{
      font-size: 40px;
      color: yellowgreen;
      text-shadow: -1px 0 black,
                    0 1px black,
                    1px 0 black,
                    0 -1px black;
    }

    文字描边效果

  2. 模糊效果，且鼠标移入时高亮，相当于设置一个默认比较低沉的颜色或者透明色，然后再hover的时候设置一个高亮的白色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    div{
        background: #1c1f2b;
        color: transparent;
        text-shadow: 0 0 .1rem white, 0 0 .3rem white;
        transition: .5s;
    }
    div:hover{
        color: white;
    }