个人中心
文章发布
退出
作者热门文章
- 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
我需要将文本放在 中在一个 Div 中，在另一个 Div 中，在另一个 Div 中。所以这是它的样子: #document Change PIN
奇怪的事情发生了。 我有一个基本的 html 代码。 html，头部， body 。(因为我收到了一些反对票，这里是完整的代码) 这是我的CSS: html { backgroun
我正在尝试将 Assets 中的一组图像加载到 UICollectionview 中存在的 ImageView 中，但每当我运行应用程序时它都会显示错误。而且也没有显示图像。 我在ViewDidLoa
我需要根据带参数的 perl 脚本的输出更改一些环境变量。在 tcsh 中，我可以使用别名命令来评估 perl 脚本的输出。 tcsh: alias setsdk 'eval `/localhome/
我使用 Windows 身份验证创建了一个新的 Blazor(服务器端)应用程序，并使用 IIS Express 运行它。它将显示一条消息“Hello Domain\User!”来自右上方的以下 Ra
这是我的方法 void login(Event event);我想知道 Kotlin 中应该如何 最佳答案 在 Kotlin 中通配符运算符是 * 。它指示编译器它是未知的，但一旦知道，就不会有其他类
看下面的代码 for story in book if story.title.length < 140 - var story
我正在尝试用 C 语言学习字符串处理。我写了一个程序，它存储了一些音乐轨道，并帮助用户检查他/她想到的歌曲是否存在于存储的轨道中。这是通过要求用户输入一串字符来完成的。然后程序使用 strstr()
我正在学习 sscanf 并遇到如下格式字符串: sscanf("%[^:]:%[^*=]%*[*=]%n",a,b,&c); 我理解 %[^:] 部分意味着扫描直到遇到 ':' 并将其分配给 a。:
def char_check(x,y): if (str(x) in y or x.find(y) > -1) or (str(y) in x or y.find(x) > -1):
我有一种情况，我想将文本文件中的现有行包含到一个新 block 中。 line 1 line 2 line in block line 3 line 4 应该变成 line 1 line 2 line
我有一个新项目，我正在尝试设置 Django 调试工具栏。首先，我尝试了快速设置，它只涉及将 'debug_toolbar' 添加到我的已安装应用程序列表中。有了这个，当我转到我的根 URL 时，调试
在 Matlab 中，如果我有一个函数 f，例如签名是 f(a,b,c)，我可以创建一个只有一个变量 b 的函数，它将使用固定的 a=a1 和 c=c1 调用 f: g = @(b) f(a1, b,
我不明白为什么 ForEach 中的元素之间有多余的垂直间距在 VStack 里面在 ScrollView 里面使用 GeometryReader 时渲染自定义水平分隔线。 Scrol
我想知道，是否有关于何时使用 session 和 cookie 的指南或最佳实践？ 什么应该和什么不应该存储在其中？谢谢! 最佳答案 这些文档很好地了解了 session cookie 的安全问题以及
我在 scipy/numpy 中有一个 Nx3 矩阵，我想用它制作一个 3 维条形图，其中 X 轴和 Y 轴由矩阵的第一列和第二列的值、高度确定每个条形的 是矩阵中的第三列，条形的数量由 N 确定。
假设我用两种不同的方式初始化信号量 sem_init(&randomsem,0,1) sem_init(&randomsem,0,0) 现在， sem_wait(&randomsem) 在这两种情况下
我怀疑该值如何存储在“WORD”中，因为 PStr 包含实际输出。？ 既然Pstr中存储的是小写到大写的字母，那么在printf中如何将其给出为“WORD”。有人可以吗？解释一下？ #include
我有一个 3x3 数组: var my_array = [[0,1,2], [3,4,5], [6,7,8]]; 并想获得它的第一个 2
我意识到您可以使用如下方式轻松检查焦点: var hasFocus = true; $(window).blur(function(){ hasFocus = false; }); $(win
我是一名优秀的程序员,十分优秀！