揭秘CSS(第 1 版)
4.8.3 匿名文本和匿名框
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

内边距

外边距

边框

背景

盒尺寸

处理溢出

框的生成

行内级元素和行内框

块级元素和块框

匿名文本和匿名框

一个元素可以按照HTML元素的嵌套方式包含其他元素,大多数情况下,框都是由显式定义的元素所生成的。

然而,当把文本直接添加到一个块容器元素中(不是包含在行内元素)时,即便没有为这些文本显式定义元素,它们也会生成框。

没有被元素显式包含的文本,称作匿名文本,因为没有与之关联的元素。把匿名文本所生成框,称作匿名框。匿名框分为两种,一种是匿名块框,另一种是匿名行内框。

当把文本直接添加到一个块容器元素中,而该块容器元素中还有其他块级元素时,这些文本就会生成匿名块框。如,以下HTML代码片段:

<div>
  Some text
  <p>More text
</div>

看上去,似乎是 div 包含行内内容和块级框。然而,根据CSS规范,如果一个块级容器框内(如,上面 div 生成的框),有一个块级框(如,上面 p 生成的框),则会强制这个块级容器框中的所有框,都是块级框。

因此,上述代码会生成一个块级框,来包围“Some text”文本,并把所生成的块级框称作“匿名块框”。如图 4‑68 所示:

匿名块框
图4-68 匿名块框

当把文本直接添加到一个块级容器中,而该块级容器中没有其他块级元素时,这些文本就会生成匿名行内框。匿名文本中的空白字符,根据 white-space 属性,如果能被合并,则不会生成任何匿名行内框。如,下面的HTML代码片段:

<p>Some <em>emphasize</em> text</p>

为了格式化这个段落,p 元素会生成一个块级框,其中包含三个行内框,分别是 em 元素生成的行内框,以及匿名文本“Some”和“text”生成的匿名行内框。如图 4‑69 所示:

匿名行内框
图4-69 匿名行内框

由于匿名框没有与任何元素相关联,因此不能被任何选择器选中。所以,匿名框只能从父元素继承那些可以继承的属性,那些不能继承的属性则使用默认值。假设本例的CSS代码如下:

p {
   color: red;
   border: 1px solid #444;
}
em {
   color: #000;
}

由于 color 属性具有继承性,而 border 属性不具有继承性。因此,匿名行内框中的文本是红色的,且没有边框。运行结果如图 4‑70 所示:

匿名框的属性
图4-70 匿名框的属性

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验