网页设计中的内容区

  • 2018-11-02 17:05:17
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

行内替换元素

一般认为网页设计行内替换元素有固有的高度和宽度,例如,一个图像的高度和宽度可能是某个像素数。因此,有固有高度的替换元素可能导致行框比正常要高。这不会改变行中任何元素的line-height值,包括替换元素本身。相反,只是会让行框的高度恰好能包含替换元素(以及所有框属性)。换句话说,会用替换元素整体(包括内容、外边距、边距和内边距)来定义元素的行内框。以下样式就能得到这样一个例子。

字形与内容区

你可能会尽力避免行内非替换元素的背景重叠,尽管如此,这种情况还是可能发生,这取决于使用何种字体。问题在于一个字体的em框与其字符字形之间可能存在差别。可以看到,对于大多数字体,其em框的高度与字符字形的高度都不一致。

这听上去可能很抽象,不过有很实际的后果。网站建设CSS2.1中指出:“内容区的高度应当基于字体,但是这个规范并没有指定如何基于字体确定内容区的高度。用户代理可能……使用em框,也可能使用字体的最大上升变形和下降变形(如果使用字体的最大上升变形和下降变形,能确保字形中落在em框上面或下面的部分仍在内容区内,但是这样一来,不同的字体会有不同大小的框)。”

换句话说,一个行内非替换元素的“绘制区”要由用户代理来决定。如果一个用户代理使em框的高度作为内容区的高度,那么行内非替换元素的背景就与em框的高度相等(即值font-size),如果用户代理使用字体的最大上升变形和下降变形,背景就可能比ex框高或矮。因此,尽管可以为行内非替换元素指定line-height 为1em,但其背景还是有可能与其他行的内容重叠。

在CSS2或CSS2.1中没有办法避免这种重叠,不过已经建议网站建设CSS3增加一些属性,允许创作人员对用户代理的行为进行控制。在这些属性得到广泛实现之前,用CSS 无法得到真正准确的格式编排。

p {font-size: 15px; line-height: 18px;}

img (height: 30px; margin: 0; padding: 0; border: none;}

图7-44:替换元素可以增加行框的高度,但不影响line-height值

尽管有所有这些空白,但段落或图像本身的line-height有效值并没有因此改变。line-height:对图像的行内框没有任何影响。由于图7-44中的图像没有内边距、外边距或边框,其行内框与其内容区相同,在这里就是30像素高。

然而,网页设计行内替换元素还是有一个line-height值。为什么呢?在最常见的情况下,行内替换元素需要这个值,从而在垂直对齐时能正确地定位元素。例如,要记住,vertical-align的百分数值要相对于元素的line-height来计算。所以:

p {font-size: 15px; line-height: 18px;}

img {vertical-align: 50%;}

<p>The image in this sentence <img src="test.gif" alt="test image"> 

will be raised 9 pixels.</p>

line-height的继承值使图像上升9个像素(而不是其他数字)。如果没有line-height值,它就无法完成百分数值指定的垂直对齐,对于垂直对齐来说,图像本身的高度无关紧要,关键是line-height的值。

不过,对于网页设计其他替换元素,将line-height值传递到该替换元素中的后代元素可能很重要。SVG图像就是这样一个例子,它使用CSS对图像中的所有文本设置样式。

当前文章标题:网页设计中的内容区

当前URL:http://www.lyjtt.cn/news/wzzz/content-area..html

上一篇:网页设计中的增加框属性

下一篇:网页设计中的替换元素

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)