大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员. 如果喜爱我的文章，能够关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交换前端，成为更优良的工程师～关注公众号：搞前端的半夏, 理解更多前端常识! 点我摸索新世界！

原文链接 ==>http://sylblog.xin/archives/19

前言

不晓得有没有晓得下面这个网站代表的意义！
1990 年 12 月 20 日，Berners-Lee 上线了世界上第一个网站：http://info.cern.ch/ 蕴含该网站诞生的信息和轶事。这就是万维网的诞生，Tim Berners-Lee 则被视为它的缔造者。

第一眼看过来，咱们看到的是啥？没错，是 文字。

text-align

定义

用于对齐 块级元素的外部内容 ，这里用了 内容 而不是 文本,
text-align 属性看名字就晓得必定会影响文本的对齐形式，同时它也对内联元素 / 内联块级元素 / 块级元素产生影响

内联 div 设置了 display:inline-block;

值

left 把文本排列到右边。默认值：由浏览器决定。

right 把文本排列到左边。

center 把文本排列到两头。

justify 实现两端对齐文本成果。

inherit 规定应该从父元素继承 text-align 属性的值。

这里着重说一下 justify，这个属性大部分人应该还是很生疏的，
什么是两端对齐文本呢，一个小例子马上明确。

对于上面的 div，咱们没有设置 text-align 属性，如图所示第一行和第二行的行尾并不是对齐的，

  .textAlign {
      width: 200px;
      height: 200px;
      background-color: #2ecc71;
    }
    <div class="textAlign">
        <span> 我是内联 span
           我是第一行内容 121
           我是第二行内容 ab
           我是第三行内容 1231231
        </span>
    </div>

当给.textAlign 加上 text-align:justify, 就会变成上面的成果，第一行与第二行的行尾对齐。

相爱的 direction

为什么会提到这个属性！认真想想咱们在没有给下面的 div 设置 text-align 的时候，文字是不是从左往右排列的，其实这就是 direction 的作用，它默认值是 ltr，文本就会从左往右显示，但当你设置为 rtl, 他就会从右往左显示。

 .textAlign {direction: rtl;}
<span>direction: rtl。</span>

请留神察看句号的地位。

如果 direction 属性是 ltr，则默认值为 left；如果 direction 属性是 rtl，则默认值为 right。

text-align-last

定义

容许强制换行之前管制最初（或惟一）行文本的对齐形式 – 例如段落的结尾或

标签之前的行。

left 将最初一行文本与容器左侧对齐。

right 将最初一行文本与容器右侧对齐。

center 将容器内的最初一行文本居中。

justify 对齐文本的最初一行，使其逾越容器的整个宽度，如果须要，在单词之间插入空格以减少行长。

start 依据文本的 将文本与行的“开始”对齐 direction- LTR 语言左对齐，RTL 语言右对齐。

end 依据 direction 文本的将最初一行与行的“结尾”对齐 -direction：ltr 为右，direction:rtl 语言为左。

auto 默认值。对齐最初一行文本以匹配元素的 text-align 属性（如果已设置）。如果未设置，auto 则将文本与结尾对齐。

 #auto {
      text-align: right;;
      text-align-last: auto;
    }

inherit 利用 text-align-last 父元素的属性。

text-indent

定义

text-indent 属性指定在元素的文本内容的第一行开始之前应该挪动多少程度间距文本。间距是从块级容器元素的起始边缘计算的。本属性对行内元素有效。

起始边缘通常在右边，但如果在从右到左的模式下也能够在左边，例如方向属性。

text-indent 属性在块元素上指定时会被继承，这意味着它也会影响行内块的后辈元素。在解决内联块子项时，您可能心愿强制它们应用 text-indent: 0;。

语法

text-indent: <length> | <percentage> | inherit && [hanging || each-line]

其中

each-line 实验性 API，不应在生产代码中应用。
缩进会影响块容器的第一行以及强制换行后的每一行，但不会影响软包装换行 后的行。

hanging 实验性 API，不应在生产代码中应用。
反转缩进的行。除第一行外的所有行都将缩进。

p {text-indent: *em;}