創作不易 拒絕白嫖 點個贊呗
關注專欄
學透CSS ,帶你走進CSS的深處！！！
前言
不知道有沒有知道上面這個網站代表的意義！
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: | | inherit && [ hanging || each-line ]
其中
each-line 實驗性API，不應在生産代碼中使用。
縮進會影響塊容器的第一行以及強制換行後的每一行，但不會影響軟包裝換行 後的行。
hanging 實驗性 API，不應在生産代碼中使用。
反轉縮進的行。除第一行外的所有行都将縮進。
p {
text-indent: *em;
}