罗里吧嗦的开头

由于连续工作多日，再加上坐姿不妥，导致近日朕龙体微恙，不想上朝。无奈“礼部”爱卿非要朕帮他解决他们单位网站上面文字排版的问题。轻叹一声，心怀天下的我只能“抱着笔记本上马安天下”了。

废话不多说了，直接说正题吧。哥们单位的网站用的是DEDECMS,用什么无可厚非因为这些CMS都很牛，主要差异还是由二次开发者的技术层次决定。真的不是我黑它们，一个简单的DEDECMS配合bootstrap用成这熊样的我也是真心的醉了。现在虽说前端框架满天飞，学习起来也比容易，无外乎简单的复制剪贴以求达到统一的页面效果。但是基础的CSS知识抽空去看一下会死啊？

再吐下槽，用bootstrap就用呗，干嘛还要用这么大的篇幅去写自主的CSS文件，很多bootstrap很好的创意由于层叠样式表的性质全被自主CSS给覆盖了。做无用功做的也是很卖力。如果是自主CSS写的漂亮也就算了……算了。不评价了……还是说说问题出到什么地方了吧:

自主CSS文件引入在bootstrap框架CSS之后，所以自主CSS覆盖bootstrap的CSS样式。破坏了整个版面对于文字方面的优化和美化。而作者自身对文字类CSS控制不熟练导致整体页面失去协调性。

其实这毛病我也有，明明用了前端框架了，还要自己写一大堆自主CSS样式，后来突然发现根本用不着，用原生框架的类效果更好！人呢~都是看别人清楚，看自己模糊啊……

font属性和color属性

想要自己做出的网站比较美观，需要下一番功夫。除了整体颜色和布局的合理搭配之外，由于人的眼球并不是一个十分完美的机器，有的时候还会产生错觉，例如在数学上绝对垂直居中的点，处于不同的容器中的时候在视觉上会有一点偏差。所以我们还要对网站内容文字进行精心的修饰。有句俗话说的好啊：“钱花哪哪好”。我给引申出来了一句“精力放哪哪出活”。除了对框架的学习使用之外，基础CSS的积累也是不可或缺的。

关于CSS中文字控制的常用属性个人总结起来有两大类：第一类是以文字自身为目标，第二类是以文字“环境”为目标。先来说对文字自身的这一类，属于这类的属性也是两大块:字形和颜色。字形用一个属性就可以概括了，就是font。这个简写属性已经可以包括全部关于字形的设置。如下图所示

通过font属性的设置，我们可以以这种简写形式来设置文字倾斜、加粗、字号、行高、字体。当然了也可以通过分别设置这些属性来单独改变文字某个属性的样式。再然后我们可以通过color属性来设置的文字的颜色，例如color:#333;。以上这些就是对文字自身为目标的常用属性设置。

text/vertical的align

之后比较复杂的就是以文字“环境”为目标的属性。这一类包含的属性比较多，不过没关系我们一点一点来。最简单的就是对文字水平位置的进行控制的text-align,在包裹文字的元素上设置这个属性可以让文字处于水平上不同的位置。例如text-align:center;就是让文字水平居中。这个地方需要提一下的是text-align:justify;这个声明。它的含义是两端对齐的意思。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整文字间的间隔，使各行的长度恰好相等，两端对齐文本在打印领域很常见。
[图片上传失败...(image-d36dd9-1524316282318)]

上图可以明显看出来text-align:justify;对文本的影响。既然在水平方向上可以控制文本之外还能在垂直方向控制文字。当然这个垂直控制是指在单行的文本中——也就是说行内元素的基线相对于该元素所在行的基线的垂直对齐的意思。

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

翻译：vertical-align属性指定内联或表单元格框的垂直对齐方式。

这句话需要注意的地方是<u style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">该属性适用的是display:inline/inline-block;的行内元素和display:table-cell;表单元素。</u>如果是块级元素的话，就不要考虑使用vertical-align。关于块级元素和行内元素的区别，出门右转查看文章《行内元素和块级元素的那些事儿》。如果是是想要对容器中的文本区域在垂直方向进行控制，这还需要一点其他的技巧，所谓的技巧不在这里详细说明了。

我们继续来说vertical-align这个能在垂直方向控制文字的属性。不过这个属性的值比较多，它的值有几种类型——关键字，数值，百分比。列一个表格就知道了。

vertical-align属性值

挺多的是吧？看似很多的知识一般来说都有一条主线存在，主要抓住了主线，所谓的难点重点重构到自己的知识体系中只不过是时间问题。（有点像小学语文课老师讲阅读理解的情况。）这些值的理解重点只有一个就是“基线（Baseline）”，只要能理解掌握了“基线”那么vertical-align就像是一盘“小咸菜”一样轻松掌控。

先来说说什么是基线。基线称领海基线,是陆地和内水同领海的分界线,是划定领海、毗连区、专属经济区和大陆架宽度的起算线。好像有什么不对！？啊哈，复制错了，应该是字体排印学中，基线（英语：Baseline）指的是多数字母排列的基准线。上个图直接就明白基线的含义了。

baseline

图中灰色的区域可以暂时理解为行内框，图片区域可以暂时理解为行框。vertical-align:baseline;的含义就是指，行内框的基线和行框的基线对齐。这个就是vertical-align垂直操作文本的原理，具体每个参数对文本的影响我会专门再写一篇文章来说明。关于vertical-align属性就暂时告一段落。还要介绍其他属性。

word-wrap\break

这个没什么需要特别说明的了，可以查看博客文章《容易混淆的word-wrap和word-break》里面有更详细的说明。

letter\word-spacing

letter-spacing和word-spacing这俩哥们有时候也是挺让人头晕的，不知道谁是谁。关于这个我不想打太多字来说明只是举个例子。通过例子直接就能看出来两者的区别了。

点击查看letter-spacing和word-spacing区别的DEMO

letter-spacing是控制字符间距，同时可以对中文有效。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal就相当于值为 0。

word-spacing控制英文单词间距，对中文无效。该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。

对这两个属性的设置可以直接影响到文字内容整体的感觉，所以设置的时候一定要慎重，多试验几次要相信眼睛看到的结果，而不是数学计算的计算的结果。毕竟文字区域的是靠人眼来感测接受信息的。

white-space

该属性的作用是属性是用来设置如何处理元素中的空白。任何元素都可以设置white-space属性。

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

这些值分别代表的是什么含义呢？看下边的表格解释，能帮助理解：

white-space属性值

这个表已经把white-space属性介绍的差不多了，关于如何运用这个属性。我记得我以前写过一篇文章中介绍截断处理技巧的时候提到过这个属性，想看的可以>>>>>>>猛击这里《标题字数超出范围截断处理方案比较》

text-indent

这个属性规定了一个元素首行文本内容之前应该有多少水平空格。我们的书写习惯都是在一段文字的第一行空两格，这样的话可以在CSS样式中直接重置<p>的样式。p{text-indent:2em;}。要看例子么？本博客的文章中每段的空两格就是这样来控制的，看我的源码就可以了，不用再举例子了吧。

使用的时候要考虑的浏览器的兼容问题，早期版本的浏览器对这个属性兼容性有限需要配合css hacker。而且本属性可以直接设置数值；还可以设置百分比数值，这里面的百分比是相对文本父元素的宽度而计算的。而且还能设置负值。

伪元素

其实我一直考虑要不要提一下伪元素中对文本的控制。其实伪元素的数量很少大概有四个，都可以为文本添加格外样式。关于伪类和伪元素之间的区别可以看我的文章——《伪类与伪元素，傻傻分不清楚》。里面有对伪类和伪元素比较详细的介绍。

最后的最后

不舒服~~写着写着都没劲儿了。关于文本控制类的CSS属性大概就是这么多了，文本控制的好了就能让整个网站锦上添花，就算出现大段的文本区域也会让人感到很协调很友好，而不是一看就丧失继续阅读下去的勇气。在文本控制中最重要的一点是要相信眼睛观测的结果而不是数学计算的结果，这个结论或者说技巧吧就是来自人的视觉误差。

例如文字的形状在两端看起来比较整齐，而顶部和底部往往参差不齐，导致人眼观测的结果会把这些参差不齐的空缺部分感知为多出来的内边距padding，所以这个时候为了文字的观测协调性我们需要减少顶部和底部的内边距。这也就是为什么在给文字区域设置内边距的时候要用padding:5px 10px;而不是使用padding:10px;的原因。

关于视距误差在前端中的影响很大，不过不用担心的是目前大多数的前端框架都很完美的解决此类问题。所以我们在使用框架技术的时候一定要尽可能多的用框架原生样式而非自主样式。但是CSS基础一定要牢靠，知其然还要知其所以然才是让自己面对诸多未知情况的时候游刃有余。掌握和掌控可不是一个境界，观察和洞察也不是一个境界，思量和忖度更不是一个境界。境界的差异一旦拉开根本就不需要再去比较等级了。

报告完毕！