个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
the W3C CSS 2.1 spec says this 中正常流 的定义| :
Normal flow
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
所以我的第一个问题是:“参与”到底是什么意思？
在“ block 格式化上下文”(BFC)的定义中它说:
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
正如我们所知，在 block 容器框(即不是“ block 格式化上下文”)中，框的布局与上面为“ block 格式化上下文”指定的定义完全相同。
所以我的第二个问题是:“参与”是指 block 容器布局的行为与“ block 格式化框”相同吗？
由于我最后一个问题的原因，我引用了这个定义:
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
当我们创建一个包含一个图像和一个段落，itt 的行为与上面的定义完全一样:
img {
float: left;
}
p {
border: 1px solid red;
}<div>
<img src="http://placehold.it/100x100&text=1">
<p>
the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like
block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!!
</p>
</div>即使我们将 p 元素更改为 div 中的 block 格式化上下文，它的行为也与下面的定义完全一样:
img {
float: left;
}
p {
border: 1px solid red;
overflow: auto;
}<div>
<img src="http://placehold.it/100x100&text=1">
<p>
the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like
block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!!
</p>
</div>如果我们将 div 更改为 block 格式化上下文，它的行为与前面的示例完全相同:
div {
overflow: hidden;
}
img {
float: left;
}
p {
border: 1px solid red;
overflow: hidden;
margin: 0;
}<div>
<img src = "http://placehold.it/100x100&text=1">
<p>
the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b>
</p>
</div>……我说得对吗？
最佳答案
当一个框被称为参与某种格式上下文时，它只是意味着该元素是根据该格式上下文的规则进行布局的。如果元素参与 block 格式化上下文，则它是 block 级的并且由 block 布局控制。如果元素参与内联格式化上下文，则它是内联级别的并且由内联布局控制。等等。
“ block 容器盒”和“ block 格式化上下文”是两个不同的概念，只是松散地相关。您似乎将它们混为一谈，这是不明智的。
block 容器框仅在特定条件下建立 block 格式化上下文。规范中列出了发生这种情况的标准，但基本上 block 容器框没有建立 BFC 的唯一时间是它具有 display: block;溢出:可见； float :无；位置:静态/相对(来自here)。
正如规范中所述，每个 block 级框都参与了一些 block 格式化上下文。它的父 block 容器是否建立BFC并不重要。如果它的父元素没有建立 BFC，那么父元素的父元素，或者父元素的父元素的父元素，或者树中更高层的其他祖先——一直到根元素——会创建。这意味着单个 block 格式化上下文可以——而且几乎总是如此——包含许多元素的嵌套级别。这统称为正常流程。
即使你有一个完整的 block 盒布局，如果它们都没有建立 BFC，那么它们都参与由根元素建立的同一个 BFC(并且根元素保证 建立一个)。在下面的示例中，所有三个元素都参与了根元素的 BFC，因此它们受 block 布局支配，即使它们都没有建立自己的 BFC:
<body>
<div>
<p>
</div>
</body>
讨论了 overflow: hidden 在存在 float 的情况下对 block 格式化上下文的影响 elsewhere ，但简而言之， float 永远不会侵入其他 block 格式化上下文，这就是为什么让 p 建立自己的 BFC 导致它由于 float 而变得更窄。让 div 建立自己的 BFC 不会改变任何东西，因为 p 仍然参与 some BFC，不管你是什么我们只是改变它参与的谁的 BFC。
关于css - CSS 2.1 规范中 "participate"定义中的 “normal flow” 是什么意思？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43215834/
25
4
0
我想做的是让 JTextPane 在 JPanel 中占用尽可能多的空间。对于我使用的 UpdateInfoPanel: public class UpdateInfoPanel extends JP
我在 JPanel 中有一个 JTextArea，我想将其与 JScrollPane 一起使用。我正在使用 GridBagLayout。当我运行它时，框架似乎为 JScrollPane 腾出了空间，但
我想在 xcode 中实现以下功能。 我有一个 View Controller 。在这个 UIViewController 中，我有一个 UITabBar。它们下面是一个 UIView。将 UITab
有谁知道Firebird 2.5有没有类似于SQL中“STUFF”函数的功能？ 我有一个包含父用户记录的表，另一个表包含与父相关的子用户记录。我希望能够提取用户拥有的“ROLES”的逗号分隔字符串，而
我想使用 JSON 作为 mirth channel 的输入和输出，例如详细信息保存在数据库中或创建 HL7 消息。 简而言之，输入为 JSON 解析它并输出为任何格式。 最佳答案 var objec
通常我会使用 R 并执行 merge.by，但这个文件似乎太大了，部门中的任何一台计算机都无法处理它! (任何从事遗传学工作的人的附加信息)本质上，插补似乎删除了 snp ID 的 rs 数字，我只剩
我有一个以前可能被问过的问题，但我很难找到正确的描述。我希望有人能帮助我。 在下面的代码中，我设置了varprice，我想添加javascript变量accu_id以通过rails在我的数据库中查找记
我有一个简单的 SVG 文件，在 Firefox 中可以正常查看 - 它的一些包装文本使用 foreignObject 包含一些 HTML - 文本包装在 div 中:
所以我正在为学校编写一个 Ruby 程序，如果某个值是 1 或 3，则将 bool 值更改为 true，如果是 0 或 2，则更改为 false。由于我有 Java 背景，所以我认为这段代码应该有效:
我做了什么: 我在这些账户之间创建了 VPC 对等连接 互联网网关也连接到每个 VPC 还配置了路由表(以允许来自双方的流量) 情况1: 当这两个 VPC 在同一个账户中时，我成功测试了从另一个 La
我有一个名为 contacts 的表: user_id contact_id 10294 10295 10294 10293 10293 10294 102
我正在使用 Magento 中的新模板。为避免重复代码，我想为每个产品预览使用相同的子模板。 特别是我做了这样一个展示: $products = Mage::getModel('catalog/pro
“for”是否总是检查协议(protocol)中定义的每个函数中第一个参数的类型？ 编辑(改写): 当协议(protocol)方法只有一个参数时，根据该单个参数的类型(直接或任意)找到实现。当协议(p
我想从我的 PHP 代码中调用 JavaScript 函数。我通过使用以下方法实现了这一点: echo ' drawChart($id); '; 这工作正常，但我想从我的 PHP 代码中获取数据，我使
这个问题已经有答案了: Event binding on dynamically created elements? (23 个回答) 已关闭 5 年前。 我有一个动态表单，我想在其中附加一些其他 h
我正在尝试找到一种解决方案，以在 componentDidMount 中的映射项上使用 setState。 我正在使用 GraphQL连同 Gatsby返回许多 data 项目，但要求在特定的 pat
我在 ScrollView 中有一个 View 。只要用户按住该 View ，我想每 80 毫秒调用一次方法。这是我已经实现的: final Runnable vibrate = new Runnab
我用 jni 开发了一个 android 应用程序。我在 GetStringUTFChars 的 dvmDecodeIndirectRef 中得到了一个 dvmabort。我只中止了一次。 为什么会这
当我到达我的 Activity 时，我调用 FragmentPagerAdapter 来处理我的不同选项卡。在我的一个选项卡中，我想显示一个 RecyclerView，但他从未出现过，有了断点，我看到
当我按下 Activity 中的按钮时，会弹出一个 DialogFragment。在对话框 fragment 中，有一个看起来像普通 ListView 的 RecyclerView。 我想要的行为是当
我是一名优秀的程序员,十分优秀！