怎样做好网页文字的布局

文章来源：http://www.code-123.com/html/200946193137580.html

做好网页中文字的排版，特别对于大篇幅的文字，可以增加网页的美观性使读者更有耐心阅读，提高用户体验度。在网页设计里，文字排版主要由三个因素控制：
    字体大小(font-size) 
    行距(line-height) 
    间距(margin,padding) 
    认真调整这三个因素的值，可以实现理想的效果。
基础行距
    在垂直韵律中,基本的单位是行距. 在整个页面上设定一个合适的行距是垂直韵律之所以能够成为韵律的必要条件. 这个行距,我们将应用于整个页面的所有文字上,包括正文、标题、侧边栏等. 例如,我们现在设定我们的字体大小(css font-size)为12px,行距(css line-height)为18px. (对于中文宋体来说,12px是能够清晰显示的最小字号. 为了保证可读性,12px的1.5倍行距就是18px. 同时12px/18px也是中文互联网上最常用的字号和行距. )我们在空白页面的垂直方向上以18px为单位做垂直网格,就像我们线格本子上的线条,每条网格线也就是基线的对齐线. 接着，我们放上三个段落(12px/18px)作为例子讲解. 


段落间距
    段落间加上段间距不但美观,而且容易在视觉上区别各段落. 但是要注意的是,垂直韵律最容易被打破的地方就是两个元素在垂直方向上的空白了. 所以,为了让下一段的文字内容落在网格内,我们要将段落间距设置为基础的倍数. 例如：我们可以设置段前距为9px,段后距为9px,9px+9px=18px；或者设置段前距(css margin-top)为0,段后距(css margin-bottom)为18px；或者段前距和段后距都是18px. 这里,我们选取第二种方案,即,设置段前距为0,段后距为18px. 图中可以看到,每段段落的文字都落在了格子内. 关闭网格可以发现,段落清晰明了,比之前容易阅读多了. 


添加标题
    使用浏览器默认的样式,你会发现,大多数情况下,垂直韵律都被打破了. 所以,添加标题,我们需要选择正确的行距和间距才可以. 
    有了添加段间距的经验,相信添加标题也不是一件难事了. 标题的文字要比正文的文字要大的多. 例如,我们现在选择h1的字体大小为24px. 
    那么,根据附录结论有：
    行距和全部垂直间距之和为基础行距的倍数。 
    那么，我们假设行距为36px,则可以设置段前距为9px，段后距为9px (验证有：36 + 9 + 9 = 54 = 3 * 18).
    同样，我们也可以设置h2:字体大小18px，行高24px，段前距3px，段后距9px(验证有：24 + 3 + 9 = 36 = 2 * 18)。

添加边注
    网站我们常常有侧边栏，我们这里就用右边的边注来代表。在这里的例子中，我们和正文一样设定边注的排版：字体12px，行距18px。正是由于我们前面的努力，我们可以看到，边注的基线和正文的基线是对齐的。关闭网格可以看到，由于基线的对齐，整个排版有条不紊，十分美观。

 

添加边框
    添加边框道理相同，无非要的就是最后要求基线与网格对齐。这里的例子中，我们来给边注加个边框吧。给他加上1px边框(css border)后，还要再加上8px的补白(css padding).细心的同学们一定发现了，为什么补白是8px呢？其实很简单，这就是保证垂直方向上的补白和边框之和，是我们的基础行高18px的倍数：垂直方向上两个补白两个边框，那么1 + 8 + 8 + 1 = 18. 
    

    加上去后，我们发现，恩？怎么没有右边文字没有对齐到网格上呢？原来加上了补白和边框后，边注下移了9px，所以网格就没有对齐啦。那么，我们就要把边注上移9px。现在，我们可以看到右边的文字已经对齐到网格。是不是感觉不错？


不同字体大小的正文
    如果有一天，老板告诉你，正文的字体太小啦，他看得眼花。你因此不得不将左边的正文设置成14px大小的字体，右边的边注保持12px。由于正文字体变大，我们也同时加大行距。根据我们前面学到的知识，我重新设计了间距：
正文：字体大小14px，行距24px，段后距24px 
h1：字体大小24px，行距24px，段前距24px，段后距24px 
h2：字体大小：18px，行距24px，段前距12px，段后距12px 
边注正文：字体大小12px，行距24px，段后距24px 
边注边框：边框粗1px，内补白11px——别忘了还要把它上移12px 
效果见:


    最后，做个使用前使用后的对比：
使用前：


使用后：


附录 基本文字排版对行距、间距的要求
根据之前的经验得出：
设行距为 dl px ,设垂直方向上的间距和为 ∑ds = dst (段前距) + dsb (段后距) (px) ①,假设基础行距为k px,则
n*k = dl + ∑ds (n为自然数) 即行距和间距之和应当是18的倍数 ②
由方程①、② 得出：
行距和全部垂直间距之和为18的倍数。