块格式化上下文（BlockFormattingContext）

最新推荐文章于 2024-10-14 13:29:43 发布
最新推荐文章于 2024-10-14 13:29:43 发布
阅读量248 收藏
点赞数
分类专栏： CSS 文章标签： BFC IFC 盒子模型 视觉格式化模型 css

原文地址：http://www.cnblogs.com/elcarim5efil/p/4745796.html

原文地址中有些图片不能正确显示了，在转载的地址还能够正确浏览图片。

其他转载：http://web.jobbole.com/83274/

挑其中的重点来说一说。

BFC创建方法

  • 根元素（<html>）或其它包含它的元素；

  • 浮动 (元素的float不为none)；

  • 绝对定位元素 (元素的position为absolute或fixed)；

  • 行内块inline-blocks(元素的 display: inline-block)；

  • 表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；

  • overflow的值不为visible的元素；

  • 弹性盒 flex boxes (元素的display: flex或inline-flex)；

注意：一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

BFC效果、特性

  1. 建立一个隔离的空间，断绝空间内外元素间相互的作用
  2. 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
  3. 处于同一个BFC中的元素相互影响，可能会发生margin collapse；
  4. 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
  5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
  6. 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
  7. 浮动盒区域不叠加到BFC上；
maomaolaoshi
关注
专栏目录
CSS理解块级格式上下文（BFC）
09-24
【CSS理解块级格式上下文（BFC）】 在CSS布局中，Block Formatting Context（BFC）是一个至关重要的概念，它决定了元素内部块级元素的布局方式，同时保证了这个区域与外部元素的布局互不影响。BFC可以看作是一个...
mmcv之ContextBlock
qq_17127427的博客
05-26 1039
论文出处： GCNet: Non-local Networks Meet Squeeze-Excitation Networks and Beyond(https://arxiv.org/abs/1904.11492) 详细代码见mmcv\cnn\bricks\context_block.py 输入参数： in_channels, 输入通道数 ratio, 输入通道数*ratio为modeling context中间conv层输出 pooling_type='att', att.
Pytorch 实现GlobalContextBlock
AI浩
11-26 1000
import torch import torch.nn as nn import torchvision class GlobalContextBlock(nn.Module): def __init__(self, inplanes, ratio, pooling_type='att', fusion_types=('channel_add', )):
GCNet
soarflight_ing的博客
12-03 4208
GCNet GCNet：Non-local Networks Meet Squeeze-Excitation Networks and Beyond,cvpr,2019. 链接：paper 代码：github 摘要 背景：Non-local Network 提供了一种捕获远程依赖关系的开创性方法，通过将特定于查询的全局上下文聚合得到每个查询位置。但是，本文发现，对于图中不同的查询位置，non-local network 网络建模的上下文信息几乎是相同的。 贡献：基于上述问题，文中建立了一个简化的基于查询
学习块格式化上下文（BlockFormattingContext）
weixin_30472035的博客
08-20 225
什么是BFC BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。 视觉格式化模型 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制，它也是CSS中的一个概念。 视觉格式化模型定义了盒（Box）的生成...
块级格式化上下文（Block Formatting Context）
letterTiger的博客
02-05 1191
CSS块级格式化上下文是块级盒子的一种能力，这种能力并不是直接通过css属性声明而获得的，而是添加css的一部分相关属性之后自动获得的能力，也就是说没有一个明确的属性就是生成块级格式化上下文的。 块级格式化上下文的能力就是让具有该能力的盒子可以隔绝盒子内外的环境，盒子内部的布局不会影响到盒子外部，同样盒子外部也不会影响到盒子内部。 那么，没有格式化上下文的盒子怎么样才能被盒子外部影响或者说怎么...
css布局之BFC模式（block formatting context）
01-19
详解BFC【 block formatting context】 BFC这个东西说常见的话你可能不觉得，但是你肯定...在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所
Block Formatting Contexts Demo
07-23
Block Formatting Contexts（块级格式化上下文）是CSS布局中的一个重要概念，它定义了元素如何在其内部以及与其他元素交互时进行布局。在Block Formatting Contexts Demo中，我们可以深入理解这一概念并探索其实际...
CSS代码编写中视觉格式化模型的学习教程
09-24
块级元素具有特定的布局上下文，称为块格式化上下文（Block Formatting Context），它会创建一个独立的块级容器，外部浮动元素不会影响到内部的布局。 而行内盒子则在水平方向上排列，它们不会独占一行，而是根据...
块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解
weixin_30693683的博客
02-27 125
CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案。定位方案用以控制元素的布局，在CSS2.1中，有三种定位方案——普通流、浮动和绝对定位： 普通流：元素按照先后位置自上而下布局，inline元素水平排列，直到行被占满后换行，block元素则被渲染为完整的一行，除非指定，所有元素默认为普通流定位。 浮动：浮动布局中，元素首先按照普通流位置出现，然后根据浮动方向尽可能向左...
块级格式化上下文（block formatting context）BFC
weixin_34342992的博客
07-14 121
最近实在是很郁闷。因为越发的感觉有些东西，有时候我们很少用或者是没有意识的去用的时候，就会忘记，比如BFC，这个概念我很早之前就看过，但是 经常的自己还是会忘记，这就是我目前学习碰到的问题了，没有意识到技术点，用或者不用自己不会考虑很多，所以好记性不如烂笔头，自己还是得总结一下。 思考： 1，BFC是什么？ 　　　 2，BFC 的特性是什么？ 　　 3，BFC如何触发？ 　　...
对BFC规范(块级格式化上下文：block formatting context) 的理解
weixin_30797199的博客
08-14 428
BFC 是什么？ BFC 就是“块级格式化上下文”的意思,创建了 BFC 的元素就是一个独立的盒子,不过只有 Block-level box 可以参与创建 BFC, 它规定了内部的 Block-level Box 如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。 BFC 有一下特性：内部的 Box 会在垂直方向,从顶部开始一个接一个地放置。Box 垂直方向的距离...
注意力机制论文:GCNet: Non-local Networks Meet Squeeze-Excitation Networks and Beyond及其PyTorch实现
mingo_敏
03-01 8802
GCNet: Non-local Networks Meet Squeeze-Excitation Networks and Beyond PDF: https://arxiv.org/pdf/1904.11492.pdf PyTorch代码: https://github.com/shanglianlm0525/PyTorch-Networks PyTorch代码:
基于html的大模型调试页面
abments的博客
10-11 659
基于html的大模型调试页面
CSS高级技巧
探索软件工程的奥秘
10-09 1284
CSS 精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。作用：可以为一个元素在不同状态之间切换的时候添加过渡效果。（2）作用：在网页中添加简单的、颜色单一的小图标。作用：设置整个元素的透明度（包含背景和内容）（1）字体图标：展示的是图标，本质是字体。属性：transition（复合属性）属性值：过渡的属性 花费时间（s）
uniapp实现页面开发中
CSDN_Admin0的博客
10-11 381
【代码】uniapp实现页面开发中。
在 CSS 选择器中，逗号（,）、空格（ ）和（无空格）区别
family20102010的博客
10-12 250
空格用于后代选择器（Descendant selector），它表示选择的是匹配左侧选择器的元素的后代（子、孙、曾孙等后代）中匹配右侧选择器的元素。空格分隔的选择器可以匹配同一棵 DOM 树中，具有特定层级关系的元素。逗号用于组选择器（Grouping selectors），它表示选择多个不同的选择器，并且为它们应用相同的样式规则。逗号分隔的选择器可以匹配不同的元素，但只有当元素匹配其中一个选择器时，样式才会被应用。值得注意的是，类选择器的顺序并不重要，只要元素的类名中包含所有类选择器的条件即可。
CSS 选择器的常见用法
最新发布
GodK777的博客
10-14 206
3. 如果需要选择多种标签,可以使⽤ , 分割,如p, div { } 表⽰同时选中p标签和div标签.逗号前后可以是以上任意选择器,也可以是选择器的组合.1. 以上三个标签选择器ul li a 中的任意,都可以替换成类选择器,或者id选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合。• ⼀个类可以被多个标签使⽤,⼀个标签也能使⽤多个类(多个类名要使⽤空格分割,这种做法可以让 代码更好复⽤)• id是唯⼀的,不能被多个标签使⽤(是和类选择器最⼤的区别)
LESS、SASS 与 SCSS 预处理器详解
jxnd123456的博客
10-11 948
SASS（Syntactically Awesome Style Sheets）是一种强大的 CSS 预处理器，它提供了更丰富的语法和功能，帮助开发者更高效地编写样式代码。SCSS 是 SASS 的一种语法格式，它是 “Sassy CSS” 的缩写。它采用了与 CSS 非常相似的语法，同时继承了 SASS 的强大功能。
深入理解CSS布局与块级格式上下文（BFC）
在Grid布局中，每一格都有自己的格式化上下文，称为Grid formatting context (GFC)，而在Flex布局中，我们有Flex formatting context (FFC)。这些新的布局模型进一步扩展了BFC的概念，为开发者提供了更多控制页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值