羅里吧嗦的開頭

由于連續(xù)工作多日，再加上坐姿不妥妈倔，導(dǎo)致近日朕龍?bào)w微恙博投，不想上朝。無奈“禮部”愛卿非要朕幫他解決他們單位網(wǎng)站上面文字排版的問題盯蝴。輕嘆一聲毅哗，心懷天下的我只能“抱著筆記本上馬安天下”了。

廢話不多說了捧挺，直接說正題吧黎做。哥們單位的網(wǎng)站用的是DEDECMS,用什么無可厚非因?yàn)檫@些CMS都很牛，主要差異還是由二次開發(fā)者的技術(shù)層次決定松忍。真的不是我黑它們蒸殿，一個(gè)簡單的DEDECMS配合bootstrap用成這熊樣的我也是真心的醉了。現(xiàn)在雖說前端框架滿天飛，學(xué)習(xí)起來也比容易宏所，無外乎簡單的復(fù)制剪貼以求達(dá)到統(tǒng)一的頁面效果酥艳。但是基礎(chǔ)的CSS知識(shí)抽空去看一下會(huì)死啊爬骤？

再吐下槽充石，用bootstrap就用唄，干嘛還要用這么大的篇幅去寫自主的CSS文件霞玄，很多bootstrap很好的創(chuàng)意由于層疊樣式表的性質(zhì)全被自主CSS給覆蓋了骤铃。做無用功做的也是很賣力。如果是自主CSS寫的漂亮也就算了……算了坷剧。不評價(jià)了……還是說說問題出到什么地方了吧:

自主CSS文件引入在bootstrap框架CSS之后惰爬，所以自主CSS覆蓋bootstrap的CSS樣式。破壞了整個(gè)版面對于文字方面的優(yōu)化和美化惫企。而作者自身對文字類CSS控制不熟練導(dǎo)致整體頁面失去協(xié)調(diào)性撕瞧。

其實(shí)這毛病我也有，明明用了前端框架了狞尔，還要自己寫一大堆自主CSS樣式丛版，后來突然發(fā)現(xiàn)根本用不著扛吞，用原生框架的類效果更好碳默！人呢~都是看別人清楚瞭郑，看自己模糊啊……

font屬性和color屬性

想要自己做出的網(wǎng)站比較美觀塞耕，需要下一番功夫柑营。除了整體顏色和布局的合理搭配之外既绕，由于人的眼球并不是一個(gè)十分完美的機(jī)器尿扯，有的時(shí)候還會(huì)產(chǎn)生錯(cuò)覺闺阱，例如在數(shù)學(xué)上絕對垂直居中的點(diǎn)殉摔，處于不同的容器中的時(shí)候在視覺上會(huì)有一點(diǎn)偏差州胳。所以我們還要對網(wǎng)站內(nèi)容文字進(jìn)行精心的修飾。有句俗話說的好耙菰隆：“錢花哪哪好”栓撞。我給引申出來了一句“精力放哪哪出活”。除了對框架的學(xué)習(xí)使用之外碗硬，基礎(chǔ)CSS的積累也是不可或缺的瓤湘。

關(guān)于CSS中文字控制的常用屬性個(gè)人總結(jié)起來有兩大類：第一類是以文字自身為目標(biāo)，第二類是以文字“環(huán)境”為目標(biāo)恩尾。先來說對文字自身的這一類弛说，屬于這類的屬性也是兩大塊:字形和顏色。字形用一個(gè)屬性就可以概括了翰意，就是font木人。這個(gè)簡寫屬性已經(jīng)可以包括全部關(guān)于字形的設(shè)置信柿。如下圖所示

通過font屬性的設(shè)置，我們可以以這種簡寫形式來設(shè)置文字傾斜醒第、加粗渔嚷、字號(hào)、行高稠曼、字體形病。當(dāng)然了也可以通過分別設(shè)置這些屬性來單獨(dú)改變文字某個(gè)屬性的樣式。再然后我們可以通過color屬性來設(shè)置的文字的顏色霞幅，例如color:#333;漠吻。以上這些就是對文字自身為目標(biāo)的常用屬性設(shè)置。

text/vertical的align

之后比較復(fù)雜的就是以文字“環(huán)境”為目標(biāo)的屬性司恳。這一類包含的屬性比較多途乃，不過沒關(guān)系我們一點(diǎn)一點(diǎn)來。最簡單的就是對文字水平位置的進(jìn)行控制的text-align,在包裹文字的元素上設(shè)置這個(gè)屬性可以讓文字處于水平上不同的位置抵赢。例如text-align:center;就是讓文字水平居中。這個(gè)地方需要提一下的是text-align:justify;這個(gè)聲明唧取。它的含義是兩端對齊的意思铅鲤。在兩端對齊文本中，文本行的左右兩端都放在父元素的內(nèi)邊界上枫弟。然后邢享，調(diào)整文字間的間隔，使各行的長度恰好相等淡诗，兩端對齊文本在打印領(lǐng)域很常見骇塘。
[圖片上傳失敗...(image-d36dd9-1524316282318)]

上圖可以明顯看出來text-align:justify;對文本的影響。既然在水平方向上可以控制文本之外還能在垂直方向控制文字韩容。當(dāng)然這個(gè)垂直控制是指在單行的文本中——也就是說行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊的意思款违。

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

翻譯：vertical-align屬性指定內(nèi)聯(lián)或表單元格框的垂直對齊方式。

這句話需要注意的地方是<u style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">該屬性適用的是display:inline/inline-block;的行內(nèi)元素和display:table-cell;表單元素群凶。</u>如果是塊級元素的話插爹，就不要考慮使用vertical-align。關(guān)于塊級元素和行內(nèi)元素的區(qū)別请梢，出門右轉(zhuǎn)查看文章《行內(nèi)元素和塊級元素的那些事兒》赠尾。如果是是想要對容器中的文本區(qū)域在垂直方向進(jìn)行控制，這還需要一點(diǎn)其他的技巧毅弧，所謂的技巧不在這里詳細(xì)說明了气嫁。

我們繼續(xù)來說vertical-align這個(gè)能在垂直方向控制文字的屬性。不過這個(gè)屬性的值比較多够坐，它的值有幾種類型——關(guān)鍵字寸宵，數(shù)值崖面，百分比。列一個(gè)表格就知道了邓馒。

vertical-align屬性值

挺多的是吧疫鹊？看似很多的知識(shí)一般來說都有一條主線存在，主要抓住了主線司致，所謂的難點(diǎn)重點(diǎn)重構(gòu)到自己的知識(shí)體系中只不過是時(shí)間問題拆吆。（有點(diǎn)像小學(xué)語文課老師講閱讀理解的情況。）這些值的理解重點(diǎn)只有一個(gè)就是“基線（Baseline）”脂矫，只要能理解掌握了“基線”那么vertical-align就像是一盤“小咸菜”一樣輕松掌控枣耀。

先來說說什么是基線⊥ピ伲基線稱領(lǐng)豪剔龋基線,是陸地和內(nèi)水同領(lǐng)海的分界線,是劃定領(lǐng)海、毗連區(qū)拄轻、專屬經(jīng)濟(jì)區(qū)和大陸架寬度的起算線颅围。好像有什么不對！恨搓？啊哈谷浅，復(fù)制錯(cuò)了，應(yīng)該是字體排印學(xué)中奶卓，基線（英語：Baseline）指的是多數(shù)字母排列的基準(zhǔn)線一疯。上個(gè)圖直接就明白基線的含義了。

baseline

圖中灰色的區(qū)域可以暫時(shí)理解為行內(nèi)框夺姑，圖片區(qū)域可以暫時(shí)理解為行框墩邀。vertical-align:baseline;的含義就是指，行內(nèi)框的基線和行框的基線對齊盏浙。這個(gè)就是vertical-align垂直操作文本的原理眉睹，具體每個(gè)參數(shù)對文本的影響我會(huì)專門再寫一篇文章來說明荔茬。關(guān)于vertical-align屬性就暫時(shí)告一段落。還要介紹其他屬性竹海。

word-wrap\break

這個(gè)沒什么需要特別說明的了慕蔚，可以查看博客文章《容易混淆的word-wrap和word-break》里面有更詳細(xì)的說明。

letter\word-spacing

letter-spacing和word-spacing這倆哥們有時(shí)候也是挺讓人頭暈的斋配，不知道誰是誰孔飒。關(guān)于這個(gè)我不想打太多字來說明只是舉個(gè)例子。通過例子直接就能看出來兩者的區(qū)別了艰争。

點(diǎn)擊查看letter-spacing和word-spacing區(qū)別的DEMO

letter-spacing是控制字符間距坏瞄，同時(shí)可以對中文有效。該屬性定義了在文本字符框之間插入多少空間甩卓。由于字符字形通常比其字符框要窄鸠匀，指定長度值時(shí)，會(huì)調(diào)整字母之間通常的間隔逾柿。因此缀棍，normal就相當(dāng)于值為 0。

word-spacing控制英文單詞間距机错，對中文無效爬范。該屬性定義元素中字之間插入多少空白符。針對這個(gè)屬性毡熏，“字” 定義為由空白符包圍的一個(gè)字符串坦敌。如果指定為長度值侣诵，會(huì)調(diào)整字之間的通常間隔痢法；所以，normal就等同于設(shè)置為 0杜顺。允許指定負(fù)長度值财搁，這會(huì)讓字之間擠得更緊。

對這兩個(gè)屬性的設(shè)置可以直接影響到文字內(nèi)容整體的感覺躬络，所以設(shè)置的時(shí)候一定要慎重尖奔，多試驗(yàn)幾次要相信眼睛看到的結(jié)果，而不是數(shù)學(xué)計(jì)算的計(jì)算的結(jié)果穷当。畢竟文字區(qū)域的是靠人眼來感測接受信息的提茁。

white-space

該屬性的作用是屬性是用來設(shè)置如何處理元素中的空白。任何元素都可以設(shè)置white-space屬性馁菜。

white-space: normal | pre | nowrap | pre-wrap | pre-line

這些值分別代表的是什么含義呢茴扁？看下邊的表格解釋，能幫助理解：

white-space屬性值

這個(gè)表已經(jīng)把white-space屬性介紹的差不多了，關(guān)于如何運(yùn)用這個(gè)屬性孤钦。我記得我以前寫過一篇文章中介紹截?cái)嗵幚砑记傻臅r(shí)候提到過這個(gè)屬性歧斟，想看的可以>>>>>>>猛擊這里《標(biāo)題字?jǐn)?shù)超出范圍截?cái)嗵幚矸桨副容^》

text-indent

這個(gè)屬性規(guī)定了一個(gè)元素首行文本內(nèi)容之前應(yīng)該有多少水平空格。我們的書寫習(xí)慣都是在一段文字的第一行空兩格偏形，這樣的話可以在CSS樣式中直接重置<p>的樣式静袖。p{text-indent:2em;}。要看例子么俊扭？本博客的文章中每段的空兩格就是這樣來控制的队橙，看我的源碼就可以了，不用再舉例子了吧萨惑。

使用的時(shí)候要考慮的瀏覽器的兼容問題捐康，早期版本的瀏覽器對這個(gè)屬性兼容性有限需要配合css hacker。而且本屬性可以直接設(shè)置數(shù)值庸蔼；還可以設(shè)置百分比數(shù)值解总，這里面的百分比是相對文本父元素的寬度而計(jì)算的。而且還能設(shè)置負(fù)值姐仅。

偽元素

其實(shí)我一直考慮要不要提一下偽元素中對文本的控制花枫。其實(shí)偽元素的數(shù)量很少大概有四個(gè)，都可以為文本添加格外樣式掏膏。關(guān)于偽類和偽元素之間的區(qū)別可以看我的文章——《偽類與偽元素劳翰，傻傻分不清楚》。里面有對偽類和偽元素比較詳細(xì)的介紹馒疹。

最后的最后

不舒服~~寫著寫著都沒勁兒了佳簸。關(guān)于文本控制類的CSS屬性大概就是這么多了，文本控制的好了就能讓整個(gè)網(wǎng)站錦上添花行冰，就算出現(xiàn)大段的文本區(qū)域也會(huì)讓人感到很協(xié)調(diào)很友好溺蕉，而不是一看就喪失繼續(xù)閱讀下去的勇氣伶丐。在文本控制中最重要的一點(diǎn)是要相信眼睛觀測的結(jié)果而不是數(shù)學(xué)計(jì)算的結(jié)果，這個(gè)結(jié)論或者說技巧吧就是來自人的視覺誤差疯特。

例如文字的形狀在兩端看起來比較整齊哗魂，而頂部和底部往往參差不齊，導(dǎo)致人眼觀測的結(jié)果會(huì)把這些參差不齊的空缺部分感知為多出來的內(nèi)邊距padding漓雅，所以這個(gè)時(shí)候?yàn)榱宋淖值挠^測協(xié)調(diào)性我們需要減少頂部和底部的內(nèi)邊距录别。這也就是為什么在給文字區(qū)域設(shè)置內(nèi)邊距的時(shí)候要用padding:5px 10px;而不是使用padding:10px;的原因。

關(guān)于視距誤差在前端中的影響很大邻吞，不過不用擔(dān)心的是目前大多數(shù)的前端框架都很完美的解決此類問題组题。所以我們在使用框架技術(shù)的時(shí)候一定要盡可能多的用框架原生樣式而非自主樣式。但是CSS基礎(chǔ)一定要牢靠抱冷，知其然還要知其所以然才是讓自己面對諸多未知情況的時(shí)候游刃有余崔列。掌握和掌控可不是一個(gè)境界，觀察和洞察也不是一個(gè)境界旺遮，思量和忖度更不是一個(gè)境界赵讯。境界的差異一旦拉開根本就不需要再去比較等級了。

報(bào)告完畢耿眉！