lt;hr>水平線

<hr size="9" /> 水平線(設(shè)定大小,單位:像素)

<hr width="80%" /> 水平線(設(shè)定寬度,單位:像素或百分比)

<hr color="#ff0000" /> 水平線對(duì)齊方式

<hr align="left" /> 水平線水平位置

<hr noshade /> 去掉水平線的陰影

align屬性值:center(默認(rèn)值) left right

<hr width="30%" color="blue" size="9" align="left"/>

<center></center>水平居中.

<br/> 換行

<p></p> 標(biāo)簽定義段落

<p align=""></p>將段落按左、中、右對(duì)齊;

align屬性值:left(默認(rèn)值) right center justify

注意：

<h1>...<h6>標(biāo)題標(biāo)記與<p>段落標(biāo)記都只有一個(gè)屬性align

<pre></pre> 定義預(yù)格式化的文本

<blockquote></blockquote> 設(shè)置段落縮進(jìn)(可以縮進(jìn)5個(gè)字符)

手冊(cè)上沒有的標(biāo)記

<xmp></xmp> 忽略HTML標(biāo)記

<nobr>…</nobr> 禁止換行

<wbr> 指定軟換行（或單詞換行），用在nobr標(biāo)記中，即使用 <nobr> 禁止了換行，使用 <wbr> 仍然可以換行

<nobr>中華人民共和國(guó)上海市<wbr>黃浦區(qū)</wbr></nobr>

天我們來(lái)聊一聊CSS文本兩端對(duì)齊。

事情的起因是這樣的，在Review一位同事做的頁(yè)面時(shí)，發(fā)現(xiàn)好幾處字符之間寫了很多空格，于是問他為什么這么做，他說(shuō)設(shè)計(jì)要求這幾個(gè)文本的呈現(xiàn)寬度必須一致，但它們的字符個(gè)數(shù)又不同，所以就在字符數(shù)少的文本中添加空格從而達(dá)到文本兩端對(duì)齊（字符均勻分布）的效果，于是我對(duì)他表示了侮辱性的贊美。

用添加空格符的方式實(shí)現(xiàn)文本兩端對(duì)齊，除了不夠優(yōu)雅，容易被羞辱之外，還有其他三個(gè)問題：

1. 不同的瀏覽器，不同的移動(dòng)設(shè)備，對(duì)空格符的展示寬度是有細(xì)微差別的，一個(gè)空格看不出影響，但是多個(gè)空格就無(wú)法保證一致了，很有可能出現(xiàn)沒對(duì)齊或者折行的情況。

2. 任何頁(yè)面都避免不了修改，如果文本需要更換，并且更換后字?jǐn)?shù)發(fā)生變化，這將意味著之前的空格數(shù)量需要重新調(diào)整，非常不利于維護(hù)。

3. 某些頁(yè)面上的文本，用戶可能會(huì)去復(fù)制，但復(fù)制下來(lái)后發(fā)現(xiàn)含有很多空格符，仍需要二次編輯。

因此在日常開發(fā)中要避免使用空格符來(lái)實(shí)現(xiàn)兩端對(duì)齊，而應(yīng)該使用標(biāo)準(zhǔn)的CSS文本對(duì)齊屬性來(lái)解決。

CSS文本對(duì)齊屬性 text-align

這個(gè)屬性大家經(jīng)常用到的值有三個(gè)：

left：左對(duì)齊

right：右對(duì)齊

center：居中對(duì)齊

它還有一個(gè)屬性值：justify，表示文本兩端對(duì)齊，也就是讓文本在固定寬度內(nèi)平均分布，使兩邊不會(huì)出現(xiàn)空白。那么用這個(gè)屬性是否就能很好的實(shí)現(xiàn)文本兩端對(duì)齊呢？

通過測(cè)試發(fā)現(xiàn)，單行文本通過text-align:justify; 并不能實(shí)現(xiàn)兩端對(duì)齊，為什么會(huì)出現(xiàn)這個(gè)情況？我們需要先了解一點(diǎn)點(diǎn)排版知識(shí)。

傳統(tǒng)書刊的排版印刷對(duì)于整個(gè)自然段通常采用兩端對(duì)齊的方式，這樣就保證了排版的美觀和良好的閱讀體驗(yàn)。但是自然段的最后一行文字是左對(duì)齊的，因?yàn)樽詈笠恍形谋疽馕吨温涞慕Y(jié)束，沒有必要繼續(xù)兩端對(duì)齊了。

細(xì)心的朋友應(yīng)該已經(jīng)猜到了，在我們測(cè)試中，文本只有一行，意味著它也是最后一行，而CSS的文本對(duì)齊方式也遵循最后一行文本默認(rèn)左對(duì)齊的原則，因此不能實(shí)現(xiàn)兩端對(duì)齊。

好在CSS為我們提供了另外一個(gè)屬性：text-align-last，這個(gè)屬性用來(lái)額外設(shè)置段落最后一行文本的對(duì)齊方式，因此對(duì)于單行文本，我們只需要設(shè)置：text-align-last: justify;就可以了，親測(cè)有效。

TIPS：單行文本要想實(shí)現(xiàn)文本兩端對(duì)齊，除了上面說(shuō)的方式，一定別忘了這個(gè)文本需要一個(gè)確定的寬度，不設(shè)置寬度，文本也就不存在兩端。因此這個(gè)單行文本不能是行內(nèi)布局，而應(yīng)該是塊級(jí)或者是行內(nèi)塊級(jí)布局。

好景不長(zhǎng)，用上面的方式實(shí)現(xiàn)了文本兩端對(duì)齊后，發(fā)現(xiàn)它只是在PC上有效，但是在IOS的系統(tǒng)瀏覽器里毫無(wú)效果，最后發(fā)現(xiàn)在IOS上不支持text-align-last這個(gè)屬性，因此這個(gè)方式并不穩(wěn)妥。

那么如何解決IOS的兼容問題呢？

著手點(diǎn)只有一個(gè)，那就是如何保證單行文本對(duì)于CSS來(lái)說(shuō)并不是最后一行？這句話看似很奇怪，其實(shí)解決辦法很簡(jiǎn)單，只需要給這個(gè)單行文本添加一個(gè)偽元素after即可。

someClass: after { content: “”}

由于添加了偽元素，單行文本不再是最后一行，偽元素才是， 同時(shí)偽元素的內(nèi)容為空字符串，并不會(huì)對(duì)顯示造成影響，因此完美解決了這個(gè)問題。

注意：偽元素after不僅要設(shè)置content，還要添加 width:100%; 和 display:inline-block; 這是因?yàn)椋喝绻辉O(shè)置寬度，偽元素內(nèi)容并不會(huì)成為第二行，如果display設(shè)置成block，又造成了偽元素變成了另一個(gè)塊級(jí)元素，所以要設(shè)置為inline-block。

最終的代碼：

someClass {text-align:justify; width:300px;}

someClass: after { content: “”; width:100%; display:inline-block;}