今天我們來聊一聊css文字兩端對齊。
事情的起因是這樣的，在review一位同事做的頁面時，發現好幾處字元之間寫了很多空格，於是問他為什麼這麼做，他說設計要求這幾個文字的呈現寬度必須一致，但它們的字元個數又不同，所以就在字元數少的文字中新增空格從而達到文字兩端對齊(字元均勻分布)的效果，於是我對他表示了侮辱性的讚美。
用新增空格符的方式實現文字兩端對齊，除了不夠優雅，容易被羞辱之外，還有其他三個問題：
1. 不同的瀏覽器，不同的移動裝置，對空格符的展示寬度是有細微差別的，乙個空格看不出影響，但是多個空格就無法保證一致了，很有可能出現沒對齊或者折行的情況。
2. 任何頁面都避免不了修改，如果文字需要更換，並且更換後字數發生變化，這將意味著之前的空格數量需要重新調整，非常不利於維護。
3. 某些頁面上的文字，使用者可能會去複製，但複製下來後發現含有很多空格符，仍需要二次編輯。
因此在日常開發中要避免使用空格符來實現兩端對齊，而應該使用標準的css文字對齊屬性來解決。
left：左對齊它還有乙個屬性值：justify，表示文字兩端對齊，也就是讓文字在固定寬度內平均分布，使兩邊不會出現空白。那麼用這個屬性是否就能很好的實現文字兩端對齊呢？right：右對齊
center：居中對齊
通過測試發現，單行文字通過text-align:justify; 並不能實現兩端對齊，為什麼會出現這個情況？我們需要先了解一點點排版知識。
傳統書刊的排版印刷對於整個自然段通常採用兩端對齊的方式，這樣就保證了排版的美觀和良好的閱讀體驗。但是自然段的最後一行文字是左對齊的，因為最後一行文字意味著段落的結束，沒有必要繼續兩端對齊了。
細心的朋友應該已經猜到了，在我們測試中，文字只有一行，意味著它也是最後一行，而css的文字對齊方式也遵循最後一行文字預設左對齊的原則，因此不能實現兩端對齊。
好在css為我們提供了另外乙個屬性：text-align-last，這個屬性用來額外設定段落最後一行文字的對齊方式，因此對於單行文字，我們只需要設定：text-align-last: justify;就可以了，親測有效。
tips：單行文字要想實現文字兩端對齊，除了上面說的方式，一定別忘了這個文字需要乙個確定的寬度，不設定寬度，文字也就不存在兩端。因此這個單行文字不能是行內布局，而應該是塊級或者是行內塊級布局。
好景不長，用上面的方式實現了文字兩端對齊後，發現它只是在pc上有效，但是在ios的系統瀏覽器裡毫無效果，最後發現在ios上不支援text-align-last這個屬性，因此這個方式並不穩妥。
那麼如何解決ios的相容問題呢？
著手點只有乙個，那就是如何保證單行文字對於css來說並不是最後一行？這句話看似很奇怪，其實解決辦法很簡單，只需要給這個單行文字新增乙個偽元素after即可。
someclass: after
由於新增了偽元素，單行文字不再是最後一行，偽元素才是， 同時偽元素的內容為空字串，並不會對顯示造成影響，因此完美解決了這個問題。
注意：偽元素after不僅要設定content，還要新增 width:100%; 和 display:inline-block;這是因為：如果不設定寬度，偽元素內容並不會成為第二行，如果display設定成block，又造成了偽元素變成了另乙個塊級元素，所以要設定為inline-block。
最終的**：
聊一聊CSS中的 死迴圈
什麼是死迴圈呢？比如乙個元素裡面有一張vertical align為bottom同時高度為192畫素的，此時該高度就是192畫素，假設此時，插入乙個子元素，高度設為100 如果此時height 100 可以計算，則子元素應該也是192畫素。但是啊但是，我們的父元素height值是auto，豈不是現在...
聊一聊CSS中的長度單位的使用
css中有很多屬性可以接受長度值，比如 width,height,margin,padding,border width,font size,text shadow。因為使用場景多，因此css也提供了許多長度單位。有的是日常生活中使用的單位，比如 厘公尺 cm 和英吋 in 有的是印刷行業使用的單位...
CSS文字對齊
文字旁邊搭配時，發現比文字靠上，原來預設的情況是頂對齊而文字底對齊，通過設定css屬性可以使得與文字對齊。設定各物件的vertical align屬性，屬性說明 baseline 將支援valign特性的物件的內容與基線對齊 sub 垂直對齊文字的下標 super 垂直對齊文字的上標 top 將支援...