css中的匿名框(Anonymous Box)

最新推荐文章于 2023-04-08 18:23:05 发布

chaoguo1234

最新推荐文章于 2023-04-08 18:23:05 发布

阅读量474

点赞数

本文链接：https://blog.csdn.net/chaoguo1234/article/details/81277608

版权

匿名框分为两种，一种是匿名块级框，另一种是匿名内联框。

匿名块级框

看下面的例子

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

上面的代码会生成一个匿名块级框来包围Some text文本。演示效果如图:

如果一个块级框(如上面的div),包含一个另一个块级框(如上面的p), 那么css强制这个块级框只包含块级框，因此会为Some text生成一个匿名块级框。

当一个行内框包含一个块框(block box)时，这个行内框 (inline box)（和与它处于同一行框内的祖先行内框）会围绕着块框被截断。断点之前和之后的行框(line boxes)会被封闭到匿名的框里，并且，这个块框会成为这些匿名框的兄弟框。当这样的行内框受到相对定位的影响时，相对定位也会影响块框。如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Anonymous text interrupted by a block</TITLE>
<style type = "text/css">
p {
    display: inline;
    background: orange;
    

}
span {
    display: block;
    background: silver;
    margin: 10px;
}
</style>
</HEAD>
<BODY>
<P>
This is anonymous text before the SPAN.
<SPAN>This is the content of SPAN.</SPAN>
This is anonymous text after the SPAN.
</P>
</BODY>

运行结果:

p元素形成的行框被分割开，并且形成两个匿名行内框，这两个匿名行内框位于<span>形成的块框两侧，它们是兄弟框。当对p元素相对定位时，这三个块框会一起移动。

匿名行内框

任何直接存在于一个块级元素里面的文本(即文本没有被行内元素包裹)，都会被视为匿名行内元素，会生成一个匿名行内框包围它们。如下:

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

p元素生成的块级框里面只包含行内元素，文本"emphsize"的行内框是<em>标签形成的，因此不是匿名框，而文本"Some"和"text"没有相应的标签包裹它们，因此包围它们的就是匿名行内框。
这些行内框从父元素那里继承可以继承的属性，那些不能继承的属性就用初始化值。

空白字符会根据white-space属性被压缩，因此不会生成任何行内框

chaoguo1234

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
css中的匿名框(Anonymous Box)

匿名框分为两种，一种是匿名块级框，另一种是匿名内联框。匿名块级框看下面的例子&lt;div&gt; Some text &lt;p&gt;More text&lt;/p&gt;&lt;/div&gt;上面的代码会生成一个匿名块级框来包围Some text文本。演示效果如图: 如果一个块级框(如上面的...
复制链接

扫一扫