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 上开源。

CSS 匿名文本和匿名框相关推荐

html 改变文本框字体颜色,CSS更改文本框的字体颜色
我已搜索和搜索,但不能很好地得到这个权利.我在我的网站上有一个文本框,在我的CSS/HTML中,我将它定义为一个类,就像其他任何东西一样,并给它一个背景图像没有问题.我决定我需要改变字体颜色,但不管我 ...
html中加一个框与底部平齐,div+CSS实现单选复选框与文本对齐
在进行div+css布局的过程中,很多同学发现表单单选框与复选框不能跟文本对齐,下面青岛星网跟大家分享:div+CSS实现单选复选框与文本对齐的方法. HTML范例代码单选框line-height: ...
css美观文本框_如何为美观和用户友好的文本使用类型
css美观文本框 Text is an important, if not the most important element in a design. It conveys the informa ...
html文本框边框变色,怎么使用CSS设置文本框的边框
如何使用CSS设置文本框的边框: 默认的文本框边框一般是不会满足实际的需求,所以需要人为的对边框进行设置,下面就来介绍一下如何设置文本框的边框. 代码实例: 蚂蚁部落 .mytest{ border: ...
html设置文本框只读属性,juqery/js/css设置文本框只读属性的方法
一.设置HTML表单文本框为只读的几种方式有时候,我们希望表单中的文本框是只读的,让用户只能查看信息而不能修改其中的信息,使 input type="text" name=&qu ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
python匿名函数_Python匿名函数
python匿名函数 Welcome to Python anonymous function tutorial. In the previous tutorial we learned about ...
html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)
div对话框,js+div+css实现好看的提示框效果(转) (2012-02-18 20:46:23) 标签: html div css 杂谈提示窗都越来越人性化了,呵呵,有的时候老板就和你要那么 ...

CSS 匿名文本和匿名框

CSS 匿名文本和匿名框相关推荐

最新文章

热门文章