个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
32
4
我想了解当 CSS 为 display:block 的元素是 CSS 为 display:inline 的元素的 DOM 子元素时会发生什么(以便 block 元素是内联元素的子元素)。
此场景在 Anonymous block boxes 中进行了描述CSS 2.1 规范部分:示例包括以下规则......
body { display: inline }
p { display: block }
...以及随附的文字说...
The BODY element contains a chunk (C1) of anonymous text followed by a block-level element followed by another chunk (C2) of anonymous text. The resulting boxes would be an anonymous block box around the BODY, containing an anonymous block box around C1, the P block box, and another anonymous block box around C2.
如果你有一个 display:inline 父元素，并且如果这个父元素有一个 display:block 的子元素，那么这个子元素的存在似乎使parent nearly 表现得像 display:block，并忽略它被定义为 display:inline 的事实(因为 parent 现在只包含匿名和非匿名 block child ，即它不再包含任何内联 child )？
我的问题是，在这种情况下(有一个 display:block 子级)那么定义父级 display:inline 而不是 之间有什么区别>显示: block ?
编辑:我更感兴趣的是理解 CSS 2.1 标准，而不是各种浏览器实现在实践中的行为方式和行为。
第二次编辑:
规范中指出了一处差异。在以下文档中，第二个“ block ”段落的边框包围了整个段落和页面的整个宽度；而第一个'内联段落的边框围绕段落内的每一行(即使有几行)并且不超过每行的确切宽度(每行都短于页面宽度)。
<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;
}
...然后第一个内联段落中的“注意:”变成一个 block ，它将段落拆分(根据规范，段落的第一部分和最后一部分现在在一个匿名 block 中)。然而，段落第一部分和最后一部分的边框仍然是“内联”样式的边框:因此，仍然与声明了 p.one 的 display:block 不一样 首先。
规范中有一段话是这样说的，
Properties set on elements that cause anonymous block boxes to be generated still apply to the boxes and content of that element. For example, if a border had been set on the BODY element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line).
“border-style”属性是唯一可见差异的属性类型吗？
最佳答案
当我阅读 the spec ，我发现你的问题实际上是quite well answered :
When an inline box contains a block box, the inline box [...] [is] broken around the block. The [in]line boxes before the break and after the break are enclosed in anonymous boxes, and the block box becomes a sibling of those anonymous boxes.
<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>
The resulting boxes would be an anonymous block box around the BODY, containing an anonymous block box around C1, the P block box, and another anonymous block box around 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 周围的匿名 block 框现在是 BODY block 框)，规范告诉区别:
Properties set on elements that cause anonymous block boxes to be generated still apply to the [generated anonymous block] boxes and content of that element. For example, if a border had been set on the BODY element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line):
+--------------------------------------
| 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. |
+--------------------------------------+
关于css - 显示 :block inside display:inline，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1371307/
32
4
0
除了 Display.getOrientation() 已弃用之外，Display.getRotation() 和 Display.getOrientation() 之间还有什么区别？ 是否都返回等于
我的问题 这些方法中有哪一种是专业网页设计师所偏爱的吗？ Web 浏览器在绘制网站时是否首选这些方法中的任何一种？ 这只是个人喜好吗？ 我还缺少其他技巧吗？ 注意:以上问题是关于设计多列布局 floa
我的问题 专业网页设计师是否喜欢这些方法？ 网页浏览器在绘制网站时是否首选这些方法？ 这只是个人喜好吗？ 我还缺少其他技术吗？ 注意:以上问题与设计多列布局有关 float :左； http://js
我有一些代码返回 MyTrait 类型的特征对象，这样它就可以返回几个不同结构之一。我想为 trait 对象实现 Display trait，这样我就可以打印对象，并将详细信息委托(delegate)
package polymorphism; /* * @author Rahul Tripathi */ public class OverLoadingTest { /** *
我希望 Display.timerExec(int,Runnable)与 Display.asyncExec(Runnable) 大致相同但有指定的延迟。然而，似乎Display.timerExec只
就像标题所暗示的，有什么区别吗？我当时使用的是pygame.display.flip，我在互联网上看到的是，他们使用pygame.display.update而不是使用flip。哪一个更快？ 最佳答案
Sample.this.display() 和 this.display() 哪个更好？ class Sample{ void display(){ System.out.println("d
当图像的 CSS 属性“显示”已被任何其他 JS 脚本/函数更改时，我想运行一些 JS 代码。有什么方法可以监视该更改并设置回调函数吗？ $(this).bind.('propertychange',
在浏览 Google 字体时我注意到第一个过滤器包含这些类别: Serif Sans 衬线 展示 手写 我知道什么是 (Sans)Serif 和 Handwriting 类别(这很明显)但是显示类别过
我想知道是否可以在列标记内渲染自定义 html，这是显示表标记的一部分。 例如，我希望我的专栏里面有一些下拉列表？ 使用纯 html，如下所示: ... Volvo Saab Me
display.newImage() 和 display.newImageRect() 有什么区别？ 哪个更好用？ 最佳答案 display.newImage() 的文档具体提到: NOTE: dis
我正在使用纯 JS 和 flexbox 为我的元素创建网格。 元素的某些部分在页面加载时被显示隐藏:无，但单击按钮后它应该在不显示和阻止之间切换。 可悲的是，这完全破坏了 display: flex
我目前正在参加 HTML/CSS 类(class)，这本书推荐我使用.desktop {display:none;}/.mobile {display:inline;} 以及div class="de
这个问题在这里已经有了答案: Css transition from display none to display block, navigation with subnav [duplicat
我理解 style="display: none" 隐藏一个 HTML 元素，而 style="display: block" 显示一个 block 级 HTML 元素。 我看到一些使用 style=
设置控件的样式 display: none 和 display: block 有什么区别？ 最佳答案 display 属性定义了某个 HTML 元素应该如何显示。 Display block 和 no
这个问题已经有答案了: Javascript AND operator within assignment (7 个回答) 已关闭 4 年前。 假设我只想在 this.state.display 为
我不确定如何命名这个问题，因为我是 Rust 新手，所以请随意提出修改建议。 我有两个结构。一个是 Job 结构，其中包含一些数字，例如作业需要多长时间等。另一个是 JobSequence，其中包含
我不确定如何命名这个问题，因为我是 Rust 新手，所以请随意提出修改建议。 我有两个结构。一个是 Job 结构，其中包含一些数字，例如作业需要多长时间等。另一个是 JobSequence，其中包含
我是一名优秀的程序员,十分优秀！