思洋互动网站建设学前班

垂直节奏

作为排版人员，Robert Bringhurst 说到，“ 排版中的空隙，如同音乐中的节拍”。它是无限可分的， 但是一些比例合适的间隔比， 任意数量的无限选择更有用。在音乐中， 对节拍的规则使用构成了韵律； 在排版和网站设计中，规则地使用空隙引出了网格理论和垂直节奏理论。正如音乐中的和谐可以通过一定比例的时间间隔获得，排版中的和谐可以通过一定比例的空间间隔来获取。

使用或者不使用网格：一个美丽 的基于网格的设计，在排版上煞费苦心。 由Mark Boulton和 Khoi Vinh 设计，为了展示“网格，妙不 可言”（http://www.subtraction.com/2007/03/18/ohyeeaahh）

比例的时间间隔获得，排版中的和谐可以通过一定比例的空间间隔来获取。                         广州网站建设,网站建设,广州网页设计,广州网站设计

Wilson Miner 的“通过基线网格进行网站的排版”中提到的垂直节奏。

为了理解垂直节奏，想象一下经典的布满线条的练习本。每条线（也被称为基线）彼此等距。如果文字正好位于基线上，意味着每一行文本的基线正好和每一行的基线吻合，这时可以说设计获得了连贯的垂直平衡。这不仅适用于主体内容，也适用于标题、脚注和边注。现在，如果我们把画好线条的纸放在布局的下面，把它当做一个看不见的排列文字的样式指导，你就获得了布局的垂直节奏。很显然，按垂直节奏排列的文本更容易扫读和阅读，因为它们似乎“呆在”正确的位置上。

维护垂直节奏的关键是行高，换句话说，是两行基线之间的距离。在CSS 中，行高（line-height）属性基本上设定了整个文本流中的网格，给用户发出了一个看不见的提示，以便他们能够顺畅地阅读。因为垂直节奏和字体大小有关，使用相对单位em 值作为行高是很自然的。一个好的副作用是维持了设计中页面布局的平衡，而不用管所用字体的大小、样式和种类。

为了维持CSS 中垂直节奏，元素间的空隙和线条间的空隙需要使用尺寸相等的基线网格。例如，如果使用18 像素的基线网格，意味着每对基线之间将有18 像素，这意味着线条之间的间距也应相应地被设置成18 像素。并且，每段的距离也应被设置成18 像素，如下例所示。                              广州网站建设,网站建设,广州网页设计,广州网站设计

1. body {  
2. font-family: Arial, sans-serif;  
3. font-size: 0.625em;  
4. /* The font-size is now 0.625 * 16px = 10px. */  
5. line-height: 1.8em;  
6. /* The leading is now 18 pixels. */  
7. } 

如果希望在段落之间留一条空白直线，你需要定义一个合适的外边距，（当然）它要和基线一样高。否则，段落将不会“呆在”正确的位置上。

1. p {margin-bottom: 1.5em; } 

当然，你可以通过调整垂直空隙以提高页面动态效果，并使文本流出其不意。然而，每一个变体都应该用头脑中的垂直节奏定义，并以行高为基础。同样，其他文本元素，如标题、脚注、图像（这也是文本元素？）和图像标题等应该总是基本行高的倍数。这种关系可以通过以下公式表述。

基线高度（basic line-height）÷ 字体大小（heading fontsize）= 行高（heading line height）

注意，在开发过程中，创建包含网格线的背景图片会起到很大的作用。在实践中，垂直节奏并不总是可以实现的，尤其是在处理很多不同尺寸图像的时候。然而，它仍然是一个值得追求的目标，对改进页面效果非常有帮助。

传统的排版分度。