什么是包含块，对于包含块的理解？

已于 2022-04-08 11:25:52 修改
阅读量1.6k 收藏 2
点赞数 3
分类专栏： CSS面试 文章标签： css 包含块
于 2022-04-07 22:11:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47450807/article/details/124028154
版权

包含块(containing block)就是元素用来计算和定位的一个框。
1、根元素(很多场景下可以看成<html>)被称为‘初始包含块’,其尺寸等同于浏览器可视窗口的大小。
2、对于其他元素，如果该元素的position是relative或者static，则包含块由其最近的块级祖先元素content box边界形成。
3、如果元素的position:fixed，则‘包含块’是初始包含块。
4、如果元素position：absolute,则包含块由最近的position不为static的祖先元素建立。
5、简单总结:
默认情况下包含块就是离当前元素最近的块级祖先元素。对于开启绝对定位的元素来说，包含块是离它最近的开启了定位(且position不为static)的祖先元素。如果所有的祖先元素都没有开启定位，则其包含块就是初始包含块。

卖菜的小白
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-包含块
wust_cyl的博客
05-20 2956
包含块:是视觉格式化模型的一个重要概念，它与盒模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。可以把包含块理解成一个参考系。那么怎么确定包含块的所属关系了，简单的说谁是谁的包含块，谁是谁的参照系。1：根元素所在的包含块被成为初始包含块，在xhtml中根元素是html,对于连续媒体设备，初始包含块的大小等于视口...
java中的static{}块的实例详解
08-29
在Java编程语言中，`static`...了解并正确使用`static`块对于理解和编写高效的Java代码至关重要。如果你在使用`static`块或Java其他特性时遇到问题，建议查阅相关文档或与其他开发者进行交流讨论，以加深理解和应用。
包含块内容详解
m0_61940160的博客
07-24 340
没错，因为我们对 div1 进行了定位，因此它会应用非根元素包含块计算规则的第三条规则，寻找离它最近的 position 的值不是 static 的祖先元素，不过显然 body 的定位方式为 static，因此 div1 的包含块最终就变成了初始包含块。首先 HTML 作为根元素，对应的包含块就是前面我们所说的初始包含块，而对于 body 而言，这是一个 static 定位的元素，因此该元素的包含块参照第一条为 html，以此类推 div1、p1、p2 以及 em1 的包含块也都是它们的父元素。
包含块、初始包含块
m0_38066007的博客
03-03 1205
浮动元素的包含块为其最近的块级祖先元素。 定位： 根元素的包含块（也称为初始包含块）由用户代理建立，在HTML中，根元素就是html元素，不过有些浏览器会使用body作为根元素。在大多数浏览器中，初始包含块是一个视窗大小的矩形，不等于视窗。 对于一个非根元素，如果其position值是relative或static，包含块则由最近的块级框构成。 对于一个非根元素，如果其position值是...
CSS定位之——什么是包含块？
hangxingkong的专栏
02-06 4008
一、包含块简单说就是定位参考框或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都具有包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。 二、包含块是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。三、原理：一个元素盒子的位置和大小有时是通过
浅谈包含块
ron_wang_的博客
08-13 320
包含块: (当一个元素没有设置定位属性的时候 这个元素position的值是默认的static 那么这个元素的包含块就是它的父级) 当一个元素是相对于自身的位置的定位(relative) 那么这个元素的包含块也是它的父级 当一个元素定位属性的值是absolute时 这个元素的包含块是离它最近的那个拥有定位属性的父级/祖父级 如果元素是相对于浏览器窗口定位的(fixed) 那么这个元素的包含块是初...
包含块
xiaowei的博客
03-03 1921
前端技术研究一：包含块 给一个div设置它的宽度为100px，然后再设置它的padding-top为20%。问：现在这个div有多高？.inner{ position: absolute; width: 100px; padding-top: 20%; } .mid{ width: 200px; } .wrap{ position:
西门子PLC中如何使用OB组织块？.rar
08-25
首先，我们需要理解OB组织块的基本概念。在西门子的SIMATIC S7系列PLC中，OBs是程序执行的起点，它们定义了程序运行的不同阶段和事件处理。根据其编号和用途，OBs分为不同种类，如OB1是主循环块，OB35用于定时中断，...
面试官：你是如何调用 wait（）方法的？使用 if 块还是循环？为什么？
最新发布
06-05
通过以上解释，我们可以看到，面试官的问题旨在考察面试者对Java线程同步机制的深入理解，包括`wait()`方法的使用场景、调用规范以及与`if`块或`循环`的配合。掌握这些知识对于成为一名合格的Java开发者至关重要。
欧姆龙OMRON PLC 功能块FB块 程序案例20多套.zip
05-15
首先，理解什么是功能块FB非常重要。在PLC编程中，FB是一种结构化编程方法，它允许将复杂的控制逻辑封装到一个可重复使用的模块中。FB通常包括输入、输出以及执行的逻辑，可以像一个黑盒一样在整个程序中调用，这样...
常用CAD标准电气图块.zip
09-09
《CAD标准电气图块详解与应用》 在计算机辅助设计（CAD）领域，电气图块是绘制电气系统图的重要元素，它们是预先定义并可重复使用...因此，对于从事电气设计的人员来说，理解和掌握这些图块是提升专业技能的关键一步。
css 包含块(Containing Box)
阿渊博客
09-05 3055
1. 什么是CSS包含块（Containing Block）:包含块（Containing Block）是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形(包含块就是一个矩形)，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。切记的就是包含块和定位属性position并不是绝对有关系的，两者只是一个归属关系。 2. 包含
什么是CSS包含块（Containing Block）
bin1813的博客
04-29 786
包含块（Containing Block）是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。 包含块简单说就是定位参考框，或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都具有包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。  
初始容纳块、初始包含块、第一屏
Jason_HeSL的博客
09-10 294
在定位的时候，大家都听说过子绝父相，但如果是子绝父不相的情况嘞，大家有没有考虑过他是基于什么来进行定位的； 首先先说一下初始容纳块是什么东西，在css权威指南中，对于浮动元素，容纳块是最近的祖辈块元素。对于绝对定位（absolute）的元素，容纳块为最近的非static定位的父级块元素。而初始容纳块就是页面的第一屏； 下面我来通过代码的形式，一一来解释这个问题。 <!DOCTYPE html> <html> <head> &l...
网页兼容性
Mandy112的博客
02-27 388
BFC：添加链接描述块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同...
button是块级元素吗_[重拾CSS]一道面试题来看伪元素、包含块和高度坍塌
weixin_39906906的博客
11-24 449
前言前几天某个群友在群里问了一道面试题，就是关于一个自适应的正方形布局的困惑，先贴上代码。我其实很长一段时间没有写 CSS 了，对于里面的一些细节也比较模糊了，因此决定重拾 CSS，来重新捋一捋这题目中的一些知识点。(本文大多采用的讲解方式为 w3 的 CSS 标准 + MDN，如果对标准比较熟悉的大神请跳过这篇文章)❝通过标准分析有什么好处？最权威的解答，能够少走弯路，不会出错。❞代码...
前端布局中的几个常见概念（FC、BFC）
zhuyunhe的专栏
03-02 6180
写前端的同学都知道CSS盒模型概念，进行CSS布局时，我们常常需要确定一个元素时block类型的块元素还是inline类型的内联元素。FC、BFC、IFC这些概念就和这些元素类型相关。 FC：Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC：Block Formatting Conte
CSS中包含块，层叠上下文，BFC,IFC究竟是什么？
古语静水流深
11-03 867
1.什么是包含块？ 如果有两个div，一个是父元素，一个是子元素。父元素会决定子元素的大小和定位。简单来说，就是可以决定一个元素大小和定位的元素。一个元素的css盒子为它的内部元素创建了包含块 。通常情况下，一个元素的包含块是由离它最近的块级祖先元素的内容边界决定的。但是当元素被设置为绝对定时，此时该元素的包含块是由离它最近的position：relative或者position：absolut
fixed与absolute定位元素的包含块
feiwumiaohua的博客
03-29 1921
absolute定位元素的包含块为最近的position为非static的祖辈元素，若祖辈元素中没有定位元素，则包含块为初始包含块，在浏览器中为浏览器视口。 fixed定位是absolute定位的一种特殊表现。fixed定位元素的包含块为初始包含块，即视口。 两者包含块都为视口时，但有什么不同之处呢？ fixed定位元素相对于视口偏移，不随着body主体内容的滚动而滚动。 而absolut
Linux中，什么是块设备，如何正确理解块设备，如何使用块设备
06-01
在Linux中，块设备是指可以随机访问的设备，例如硬盘、SSD等。它们可以被分成固定大小的块，每个块都可以单独访问，而且每个块都有独立的地址。 正确理解块设备的概念，需要理解两个概念：块和设备。块是固定大小的数据块，设备是存储或处理数据的硬件或软件实体。块设备是基于块来访问设备的一种方式，它将设备抽象成一个固定大小的块序列，每个块都可以通过地址独立访问。 在Linux中，块设备通常是通过块设备驱动程序来控制的。常见的块设备驱动程序包括SCSI、IDE、SATA等。使用块设备需要先将设备挂载到文件系统上，然后可以通过文件系统来访问设备上的数据。在Linux中，可以使用mount命令来挂载块设备，例如： ``` # 将/dev/sda1挂载到/mnt目录下 $ sudo mount /dev/sda1 /mnt ``` 然后就可以通过/mnt目录来访问设备上的数据了。 在使用块设备时，需要注意保持数据的一致性和完整性，避免数据损坏或丢失。可以通过使用文件系统的日志等机制来保证数据的一致性和完整性。此外，还需要注意在访问块设备时加锁，避免多个进程同时访问同一块设备导致数据冲突。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值