写代码只是程序猿干的事情，但word这样日常办公软件几乎没一个坐在办公室工作的人都会，只是熟悉的程度不一样摆了。在长篇图文排版中，我们的图片是不能够来浮动的，一般的使用嵌入型，原因大家经常使用word都应该知道，当然也许有更加高阶的使用方法。

就在这个地方，我们会发现一个现象，就是当我们先把文档写完再排版（当然有的人也习惯一边写一边排版），设置行距的时候很多时候设置为固定多少磅，比如我记得写本科毕业论文的时候我们学校要求正文是小四字体行距固定值20磅，实际上这个约束对于不懂原理的人是一个坑，后续我们会说到这点。当我们用格式刷刷完一页后，发现里面的图片就出问题了。看下面的对比：

上面的图片是没有设置固定行距的时候（未排版时候的），接下来就是设置固定值20磅的时候。

这里就出现这个问题，当然熟悉word的朋友应该知道怎么修正这个问题，那就是把图片的行距设为相对的，比如一倍行距或者双倍行距等等。

——————————-分割线——————————-

那么这里跟CSS有神马关系呢？其实对于word的排版，我们可以这样说，从理论上讲word能排的版式我们用css样式都能做到，而且会更加灵活。这里我们就聊聊line-height在设置行高这个点，实际上这个属性还有其他的大作用，以后有时间再讨论吧。

毫无疑问，line-height这个属性是css中最常用的一个属性之一，很多写过css的朋友都会心里想，这个东西太简单了，我几乎天天在用，这么简单的东西没必要分析了。如果你也是这样认为，那么很抱歉，那只能说明你没有真正掌握css，更可怕的是你根本没有想过让自己更加深入的掌握。实际上line-height这个属性除了我们用于设置行高外还有其他的用途，这里且不说其他的用途，我们就说高于设置行高。

就我所知，line-height可以用5种不同的方式来表示它的值，分别是normal、数值、固定值、百分比、继承，对于不屑这些基础原理的你不知道是否理解不同表示方式间的区别。而对于很多人而言用得最多的莫过于固定值了（其实固定值也有多重表述方式，比如pt、px、em等）。我们听说过一句话，叫做存在即合理，而我觉得在这里是存在即意义，而且是非常重要的意义、无可替代的意义。

实际上，我告诉你，你习惯性的使用固定值来表示的方式有点儿极端了，在某些场合下会出问题的。比如说你在固定布局的网页上面使用固定值来写一个固定大小的按钮我觉得事没有问题，但现在随着其他布局方式的流行，你就不能再停留听到line-height就想到用固定值的时候了。

这里就举一个例子吧，现在很多网站是UGC模式，也就是用户原创内容，而用户对内容的排版是不太一样的习惯，同时他们也不会像我们一样知道怎么样排版出非常标准化的版面。有的人喜欢大字体有的人喜欢小的字体，而且一篇文章中也会有大有小。看下面的对比似乎就能体会到了：

对于第一个段落而言似乎是刚刚好，而对于第二个段落而言似乎就太难看了，看到这里我看你还敢不敢随便一味的使用固定值来表示了（当然比如字号啥的固定了使用固定值也没太大关系，比如自己的博客，每篇文章字号啥的都差不多，我觉得还是可以用固定值的）。而normal从字面意义上我们就能知道是一个默认或者正常的自动的值，一般的为内容本身高度是1.1-1.2倍的样子（比如在Chrome中14px的字体的段落默认的行高是16px，30px的字体对应的行高是34px）。对于继承，我总结的基本规律就是，如果父级（含祖先）设定了值就继承，否则就是默认的值，当然如果他本身设定了值那就是根据它本身的了。

也就是line的优先级是：固定值/百分比/数值>继承>normal。

到这里那么就落到了一个问题上，那就是最高优先级的固定值/百分比/数值他们之间的差别了。首先就是固定值和百分比（数值）的区别，这个很好区分，固定值就是一个固定的，而后面两个是相对的。举例说明：

我拥有100万人民币，我在国企上班，我不贪污，总是这么多。

小明拥有100万，我所拥有的是他的1.5倍，我的钱根据小明的来改变。

小明拥有100万，我所拥有的是他的150%，我的钱根据小明的来改变。

五年后：

我拥有100万人民币，我依然国企上班，我不贪污，还是这么多。

小明拥有200万，我所拥有的是他的1.5倍，这几年做生意小明帮我打拼赚钱啦。

小明拥有200万，我所拥有的是他的150%，这几年做生意小明帮我打拼赚钱啦。

看上面这个例子，我们可以很明显的区别第一个和后面两个得出的结论完全不一样，前者永远都是100万，而后两个从150万变成了300万，显然是不一样的。到这里，有的人肯定会说，我知道了，数值和百分数表示都一样的，例子中不是就说明了。

但你忘记了一句经典的话么？叫做艺术来源于生活但高于生活，在这里我觉得技术来源于生活而驱动生活；因此我们的技术并不完全等同于我们的日常实例的。那么他们之间到底有什么区别呢。还是用贴出演示的代码及对应的效果对比来说明吧。

<style type="text/css">
.d1{line-height:1.5; font-size:30px;}
.d2{line-height:150%; font-size:30px;}
p{font-size:16px;}
</style>
<div class="d1">
     div1中的内容
     <p class="p1">
          段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落
     </p>
</div>
<div class="d2">
     div2中的内容
     <p class="p2">
         段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段
     </p>
</div>

上面这个例子可以说明其中有什么不一样了，d1的行高是30*1.5=45(px)，d2的行高是30*150%=45(px)，而p是继承div的值，那么两个div的行高是相同的，而两个div下的子元素p的行高却为啥相差了这么多呢。实际上差别就在这里，就是在继承方式上面的不同。

对于p1来讲，他只是继承了父级div中关于行高描述的1.5，也就是把1.5给继承下来了，于是p1的行高=1.5*16px=24px

对于p2来讲，他则是继承了父级div中整个关于行高描述的值，即45px，于是p2的行高=d2的行高=45px。

那么到这里，如果说有一个这样的需求，一篇文章中，使用.content选择器来包含所有的内容，我们需要不管是什么内容，不管字大字小，统统1.5倍的行高。那么这个下面可能有div、p、dl、li、ul等等很多各不相同的元素，不同元素浏览器给它的css默认属性值也是不同的，那么我们应该使用1.5还是150%呢，答案是显然的。

.content{line-height:1.5;}

也就是使用1.5，当然你也可以使用如下代码

.content *{line-height:150%;}

但是你说是使用*好呢，还是不使用好呢，你说吧!

好了就到这里吧，有时间继续分享line-height其他用途的分析，当然也可以是CSS其他属性的深入分析，当然还可以是php、js等等。对于这些，很多朋友可能会说，干嘛没事做这么分析来分析去，我只要知道这个属性的基本用途就好了，我照样能写出非常华丽丽的页面。对！你是能！但你想过没有，深入理解后你的效果会更高！你的页面会更加华丽丽、兼容性更强，当然需要你付出更多的学习研究成本。