当前位置: 首页 > 面试题库 >

display:block内部显示:内联

周锐
2023-03-14
问题内容

我想了解当CSS是CSS元素的display:blockDOM子元素display:inline(因此block元素是inline元素的子元素)时会发生什么情况。

CSS 2.1规范的“ 匿名块框”部分描述了这种情况:该示例包括以下规则…

body { display: inline }
p    { display: block }

…以及随附的文字说…

BODY元素包含一个匿名文本块(C1),然后是一个块级元素,然后是另一个匿名文本块(C2)。结果框将是围绕BODY的匿名阻止框,其中包含C1周围的匿名阻止框,P阻止框和C2周围包含另一个匿名阻止框。

如果您有一个display:inline父元素,并且该父元素有一个子元素,则该子元素display:block的存在似乎会使该父元素的行为
几乎
display:block,而忽略了其定义为的事实(因为该父元素display:inline现在除匿名外不包含任何其他元素)和非匿名的屏蔽子级,即它不再包含任何内联子级)?

我的问题是,在这种情况下(有一个display:block孩子),那么定义display:inline而不是定义父母之间有什么区别display:block

编辑:我更想了解CSS 2.1标准,而不是各种浏览器实现在实践中的表现。

第二次编辑:

规格中有一个区别。在以下文档中,第二个“块”段落的边框包围了整个段落和页面的整个宽度;而第一个’inline段落的边框围绕该段落中的每行(即使有多行),且不超过每行的确切宽度(每行短于页面宽度)。

<html>
<head>
<style type="text/css">
p.one 
{
border-style:solid;
border-width:1px;
display: inline;
}
p.two 
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">Some text. <b>Note:</b> The "border-width"
property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>
<p class="two">Some text.</p>
</body>
</html>

如果我添加以下样式规则…

b
{
display: block;
}

…然后,第一个内联段落中的“注:”将成为一个块,该段落将拆分该段落(根据规范,该段落的第一部分和最后一部分现在位于匿名块中)。但是,该段落的第一部分和最后部分的边框仍然是“内联”样式的边框:因此,仍然与最初p.one声明的边框不同display:block

规格中有一个报价,说:

在元素上设置的会导致生成匿名阻止框的属性仍然适用于该元素的框和内容。例如,如果在上面的示例中在BODY元素上设置了边框,则将在C1(在行的结尾处打开)和C2(在行的开头处打开)周围绘制边框。

“边界样式”属性是唯一可以看到区别的属性类型吗?


问题答案:

当我阅读规范时,我发现您的问题实际上得到了很好的回答:

内嵌盒包含一个块框时,该内嵌框在块周围断裂。中断前和中断后的[in]内嵌框都包含在匿名框中,而阻止框将成为这些匿名框的同级。

<BODY style="display: inline; ">
This is anonymous text before the P.
<P>This is the content of P.</P>
This is anonymous text after the P.
</BODY>

结果框将是围绕BODY的匿名阻止框,其中包含C1周围的匿名阻止框,P阻止框和C2周围包含另一个匿名阻止框。

或者,在视觉上:

+- anonymous block box around body ---+
| +- anonymous block box around C1 -+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- P block box -------------------+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- anonymous block box around C2 -+ |
| |                                 + |
| +---------------------------------+ |
+-------------------------------------+

现在您的问题是:这与<BODY style="display: block; ">

是的。虽然它仍然是4个盒子( 身体周围的匿名阻止盒子 现在是 BODY阻止盒子 ),但规格说明 了区别

在元素上设置的导致生成匿名块框的属性仍然适用于该元素的[生成的匿名块]框和内容。
例如,如果在上面的示例中在BODY元素上设置了边框,则将在C1(在行的结尾处打开)和C2(在行的开头处打开)周围绘制边框:

+--------------------------------------
| This is anonymous text before the P. 
+--------------------------------------
  This is the content of P.
 --------------------------------------+
  This is anonymous text after the P.  |
 --------------------------------------+

这不同于<BODY style="display: block; ">

+--------------------------------------+
| This is anonymous text before the P. |
|                                      |
| This is the content of P.            |
|                                      |
| This is anonymous text after the P.  |
+--------------------------------------+


 类似资料:
  • 问题内容: 我有一个可以根据用户选择显示标签,图像,表格视图或不显示任何内容的地方。这是我当前的动态视图层次结构: UIStackView_Parent UILabel-一些文本,固定视图 UIStackView_Child-这是可以显示多个内容或不显示任何内容的容器 UIView-另一个固定视图 当我用标签或图像打电话时,它可以正常工作,但不显示表格。我已经根据单元格的数量将框架设置为固定高度,

  • 我有一个JTextArea,它位于JScrollPane中,而JScrollPane又位于JPanel中,而JTextArea又位于JTabbedPane的Tab中。 我知道文本被添加到我的JTextArea中,但是当我在选项卡之间移动时,JTextArea是不可见的。要阅读文本,我必须选择JTextArea中的文本,然后将JTextArea的背景设置为白色。如果我不选择,我什么也看不到。 下面是

  • 问题内容: 我注意到人们在1:1的比较中涵盖了某些显示属性的细节,但是在说明差异时还没有涉及很多。可能有人解释各种inline-之间的差异 的东西 显示标签? 对w3schools之类的地方进行更详细的定义会产生奇迹。 问题答案: 对于任何具有块和内联变体的显示类型,唯一的区别是,该显示类型具有以内联方式放置的框(即,[以内联格式设置的上下文),而另一种具有格式化为块级框的框,这取决于大多数情况。

  • 编写Web应用可能是单调的,因为你需要不断的重复某一种模式。 Django尝试从model和 template层移除一些单调的情况,但是Web开发者依然会在view(视图)层经历这种厌烦。 Django的通用视图被开发用来消除这一痛苦。它们采用某些常见的习语和在开发过 程中发现的模式然后把它们抽象出来,以便你能够写更少的代码快速的实现基础的视图。 我们能够识别一些基础的任务,比如展示对象的列表,以

  • 显示Flash®内容   使用PSP-1000系列时,选择PSP™主机之(设定) > (主机设定),并将[启动Flash® Player]设定为有效后,即能显示支持Macromedia® Flash®之内容。 提示 已安装Macromedia® Flash® Player 6(不支持部份机能)。 设定为有效却仍无法显示Flash®内容时,请进入选单列之[工具] > [设定] > [显示设置]并变更

  • 布局文件 如果我正在移动cardView的项目并与recyclerView并行,那么只有它正在显示。在当前情况下,屏幕上显示的是注释,甚至没有回收器查看项目。 如何在relativeLayout内使用cardView? 我在这里遗漏了任何android概念吗?