理解 CSS 中的 Containing Block

前言

在开始本文之前先来看一个例子，下面一段简单的 html 代码，布局很简单：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Css Containing Block</title>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      .parent {
        height: 100px;
        width: 100px;
        background-color: red;
      }

      .child {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 50%;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="parent">
        <div class="child"></div>
      </div>
    </div>
  </body>
</html>

  1. 两个嵌套的 div，一个背景是红色，一个背景是黄色。

  2. div parent 设置的宽高分别是 100px、100px。

  3. div child 设置的宽高是 50%、50%。

让我们思考一下这段代码的运行效果应该是什么样子，然后看一下实际的运行结果是不是和我们思考的一样。

运行结果如下：243855b6a43baa10ff7d9fcbdb254d6a.png

对于前端初学者来说可能会有这样的困惑，明明 child 的 width 和 height 分别设置的 50%、50%，那黄色背景的 child 的大小不应该是 width=50px、height=50px 吗？带着这个疑问我们来改一下代码如下：

给 parent 增加 transform: translate(20px, 20px);

.parent {
  height: 100px;
  width: 100px;
  transform: translate(20px, 20px); // 添加transform
  background-color: red;
}

保存之后在浏览器里运行，再看一下效果：c165922d103faebbc8fa29297b7abd3c.png

这次的运行效果和我们预期的一致了，黄色背景的 child width=50px、height=50px。

理解产生这个现象的原因，我们要知道 Containing Block。

transform 是 CSS 里的一个属性，它的取值很多，利用 transform 我们可以对元素进行旋转、缩放、平移以及元素歪斜（skew）

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Global values */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

Containing Block

在介绍 Containing Block 之前，先来复习一下 CSS 盒模型，以标准盒模型为例，html 里的每一个元素都有一个盒子，盒子由 Content、Padding、Border、Margin 组成。标准盒模型的 Content 区域就是我们设置的宽、高大小。784be7c97fd7195bbc57892d37683387.png

在 CSS 中元素的大小和位置是由 Containing Block（包含块） 决定。在大多数情况下，一个元素的 Containing Block 就是离它最近的 block 级 的盒子的 Content 区域。比如我们把上面的例子再改一改：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Css Containing Block</title>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      .parent {
        height: 100px;
        width: 100px;
        background-color: red;
      }

      .child {
        width: 50%;
        height: 50%;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="parent">
        <div class="child"></div>
      </div>
    </div>
  </body>
</html>

运行结果：36d7007846e52896ebbbfd953ece152d.png

这是我们最熟悉的。接下来我们看看什么情况下 Containing Block 不是离它最近的 block 级 的盒子的 Content 区域。

Containing Block 的改变由元素的 position 属性决定。

1、position 值为 static、relative、sticky

如果 position 值为 static、relative、sticky，那么它的 Containing Block 就是离它最近的祖先块级元素的 Content 区域。或者是像 table、flex、grid 这种 formatting context。

position 默认值为 static

2、position 值为 absolute

如果 position 值为 absolute，它的 Containing Block 就是离它最近的 position 的值不是 static （也就是值为 fixed, absolute, relative 或 sticky）的祖先元素的 Padding 区域。

举个例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Css Containing Block</title>
    <style>
      body {
        padding: 0;
        margin: 0;
      }

      .grandparent {
        width: 300px;
        height: 300px;
        background-color: green;
        position: absolute;
        padding: 50px;
      }

      .parent {
        height: 100px;
        width: 100px;
        background-color: red;
      }

      .child {
        position: absolute;
        width: 10%;
        height: 10%;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="grandparent">
        <div class="parent">
          <div class="child"></div>
        </div>
      </div>
    </div>
  </body>
</html>

这个例子中，div child 的 width 为 grandparent 的 (width + paddingleft + paddingright) = (300+50+50)*10%=40px，height 同理。

d1db9f64802f94e5166133a721854547.png

3、position 值为 fixed

如果 position 值为 fixed，在连续媒体的情况下 (continuous media) Containing Block 是 viewport。在分页媒体 (paged media) 下的情况下 Containing Block 是分 page area。关于连续媒体和分页媒体，我们的电脑显示屏一般是连续媒体，打印机一般是分页媒体。

连续媒体指的是那些可以无限延伸并且没有固定页面尺寸的媒体。常见的连续媒体包括计算机屏幕、投影仪、手机屏幕等。在处理连续媒体时，CSS 通常会自动将内容调整到适合媒体尺寸的布局，以便内容可以在用户设备上连续滚动或自适应显示。分页媒体指的是那些有固定页面尺寸、需要将内容分割成适合打印或显示在不同页面上的媒体。常见的分页媒体包括打印纸张、PDF 文件等。在处理分页媒体时，CSS 可以控制内容的分页、分栏和排版，以确保内容适合在每一页上显示，并提供良好的打印效果。

4、position 值为 absolute 或 fixed 的特殊情况

如果 position 值为 absolute 或 fixed，Containing Block 也可能是由满足以下条件的最近父级元素的 Padding 区域组成：

4.1 transform 或 perspective 的值不是 none 的父级元素

什么意思呢？我们把第二点中 position 值为 absolute 的例子改一下，给 parent 增加 transform: translate(20px, 20px);, 这个时候 child 的 Containing Block 就是 parent 了，width 和 height 都为 10px。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Css Containing Block</title>
    <style>
      body {
        padding: 0;
        margin: 0;
      }

      .grandparent {
        width: 300px;
        height: 300px;
        background-color: green;
        position: absolute;
        padding: 50px;
      }

      .parent {
        height: 100px;
        width: 100px;
        transform: translate(20px, 20px);
        background-color: red;
      }

      .child {
        position: absolute;
        width: 10%;
        height: 10%;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="grandparent">
        <div class="parent">
          <div class="child"></div>
        </div>
      </div>
    </div>
  </body>
</html>

运行结果：a3c4bbb100dcf8a2f9bcf39473da70a9.png

4.2 will-change 的值是 transform 或 perspective
4.3 filter 的值不是 none 或 will-change 的值是 filter（只在 Firefox 下生效）
4.4 contain 的值是 paint（例如：contain: paint;）
4.5 backdrop-filter 的值不是 none（例如：backdrop-filter: blur(10px);）

以上就是 Containing Block 就是最近父级元素的 Padding 区域。

总结

本文总结了作者对 Containing Block 的基本理解，帮助大家在写 CSS 布局的过程中遇到奇怪的现象进行问题排查。

参考资料

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts

https://developer.mozilla.org/en-US/docs/Glossary/Continuous_Media

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

ee5c3490d25e944be6310a5ee43310f6.png

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/59316.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Clickhouse 优势与部署

Clickhouse 优势与部署

一、clickhouse简介 1.1clickhouse介绍 ClickHouse的背后研发团队是俄罗斯的Yandex公司&#xff0c;2011年在纳斯达克上市&#xff0c;它的核心产品是搜索引擎。我们知道&#xff0c;做搜索引擎的公司营收非常依赖流量和在线广告&#xff0c;所以做搜索引擎的公司一般会并行推…
阅读更多...
IDEA用Gradle构建项目时，lombok插件无效的解决办法

IDEA用Gradle构建项目时，lombok插件无效的解决办法

Lombok 可用来帮助开发人员消除 Java 的重复代码&#xff0c;尤其是对于简单的 Java 对象&#xff08;POJO&#xff09;&#xff0c;比如说getter/setter/toString等方法的编写。它通过注解实现这一目的。 正确使用姿势 一、安装Lombok插件 菜单栏File -> Settings ->…
阅读更多...
迁移学习：使用Restnet预训练模型构建高效的水果识别模型

迁移学习：使用Restnet预训练模型构建高效的水果识别模型

目录 引言 1 迁移学习 1.1 什么是迁移学习 1.2 迁移学习能解决什么问题 1.3 迁移学习面临的三个问题 1.3.1 何时迁移 1.3.2 何处迁移 1.3.3 如何迁移 1.4 迁移学习的分类 1.4.1 按照学习方式的划分 1.4.2 按照使用方法的划分 2 Restnet网络 2.1 Restnet介绍 2.2 Re…
阅读更多...
GO学习之 多线程(goroutine)

GO学习之 多线程(goroutine)

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 文章目录 GO系列前言一、并发介绍1.1 进程和线程和协程1.2 并发和并行 二、goroutine介绍三…
阅读更多...
Centos7 上安装 redis-dump 和redis-load 命令

Centos7 上安装 redis-dump 和redis-load 命令

一、安装rvm 1、安装GPG keys gpg2 --keyserver keyserver.ubuntu.com --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDBcurl -sSL http://rvm.io/mpapis.asc | gpg2 --import - curl -sSL http://rvm.io/pkuczynski.asc | g…
阅读更多...
【C++】开源：matplotlib-cpp静态图表库配置与使用

【C++】开源：matplotlib-cpp静态图表库配置与使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍matplotlib-cpp图表库配置与使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&…
阅读更多...
VLT：Vision-Language Transformer用于引用的视觉语言转换和查询生成分割

VLT：Vision-Language Transformer用于引用的视觉语言转换和查询生成分割

摘要 在这项工作中&#xff0c;我们解决了引用分割的挑战性任务。引用分割中的查询表达式通常通过描述目标对象与其他对象的关系来表示目标对象。因此&#xff0c;为了在图像中的所有实例中找到目标实例&#xff0c;模型必须对整个图像有一个整体的理解。为了实现这一点&#…
阅读更多...
超全整理，Jmeter性能测试-常用Jmeter第三方插件详解（超细）

超全整理，Jmeter性能测试-常用Jmeter第三方插件详解（超细）

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 Jmeter作为一个开…
阅读更多...
不规则文件转JSON

不规则文件转JSON

需求分析&#xff1a; 有时候&#xff0c;我们取出来的数据并不是一个规则的JSON文件&#xff0c;这个时候面对存库还是ES检索都是一个问题&#xff0c;所以我们就需要进行解析&#xff0c;然而用字符串分割是不现实的&#xff0c;我们需要一种快速的方法。 问题解决&#x…
阅读更多...
使用 Docker Compose 部署单机版 Redis：简单高效的数据缓存与存储

使用 Docker Compose 部署单机版 Redis：简单高效的数据缓存与存储

家人们啦&#xff01;今天我们来介绍如何使用 docker-compose 部署单机版 Redis&#xff0c;这是一个简单高效的数据缓存与存储解决方案&#xff0c;广泛应用于Web应用、移动应用以及各类数据处理场景。我们过后几篇文章了将会介绍cluster和sentinel集群的部署。通过本文的指导…
阅读更多...
【LeetCode每日一题】——304.二维区域和检索-矩阵不可变

【LeetCode每日一题】——304.二维区域和检索-矩阵不可变

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 矩阵 二【题目难度】 中等 三【题目编号】 304.二维区域和检索-矩阵不可变 四【题目描述】 …
阅读更多...
（学习笔记-进程管理）进程

（学习笔记-进程管理）进程

进程 我们编写的代码只是一个存储在硬盘的静态文件&#xff0c;通过编译后会生成二进制可执行文件&#xff0c;当我们运行这个可执行文件后&#xff0c;它会被装载到内存中&#xff0c;接着CPU会执行程序中的每一条指令&#xff0c;那么这个运行中的程序就被称为进程。 现在我…
阅读更多...
关于docker的一些深入了解

关于docker的一些深入了解

本文将深入介绍一下docker方面的知识&#xff0c;不尽完全&#xff0c;慢慢完善。 进程 进程的概念 在介绍docker的相关知识前&#xff0c;先了解一下相关概念。进程就是系统中正在运行的程序&#xff0c;进程是操作系统的概念&#xff0c;每当我们执行一个程序时&#xff0…
阅读更多...
【unity】Pico VR 开发笔记（视角移动）

【unity】Pico VR 开发笔记（视角移动）

【unity】Pico VR 开发笔记&#xff08;视角移动&#xff09; 视角移动是简单的基础功能&#xff0c;这里区别于头显定位获得的小范围位移&#xff0c;是长距离不影响安全边界的位移方式。的常见的位移方式有两种&#xff0c;其一是触发后瞬间传送到指定位置&#xff0c;其次是…
阅读更多...
Linux: 设置qmake的Qt版本

Linux: 设置qmake的Qt版本

Qt开发&#xff0c;qmake会对应一个Qt版本&#xff0c;有时候需要切换这个版本&#xff0c;例如把qmake从Qt5.12切换到Qt5.9, 怎么操作呢&#xff1f; 案例如下&#xff1a; 银河麒麟V10系统&#xff0c;下载安装了Qt5.9.8&#xff0c;但是检查qmake发现它使用的是5.12.8&…
阅读更多...
OPC DA 客户端与服务器的那点事

OPC DA 客户端与服务器的那点事

C#开发OPC客户端&#xff0c;使用OPCDAAuto.dll。在开发过程中偶遇小坎坷&#xff0c;主要记录一下问题解决办法。 1、建立客户端&#xff0c;参考链接。建立WinFrom工程&#xff0c;将博客中代码全部复制即可运行&#xff1a; https://www.cnblogs.com/kjgagaga/p/17011730.…
阅读更多...
Java阶段五Day19

Java阶段五Day19

Java阶段五Day19 问题解析 需求单查询列表功能的bug 业务逻辑&#xff1a; 需要用户登录&#xff0c;师傅入驻&#xff0c;审核入驻通过 查询师傅详情&#xff08;areaIds&#xff0c;categoryIds&#xff09; demand-server-dao-impl 包含持久层实现 requestOrderMappe…
阅读更多...
Vue——formcreate表单设计器自定义组件实现(二)

Vue——formcreate表单设计器自定义组件实现(二)

前面我写过一个自定义电子签名的formcreate表单设计器组件&#xff0c;那时初识formcreate各种使用也颇为生疏&#xff0c;不过总算套出了一个组件不是。此次时隔半年又有机会接触formcreate&#xff0c;重新熟悉和领悟了一番各个方法和使用指南。趁热打铁将此次心得再次分享。…
阅读更多...
身体原来是一份宝贵的“情绪地图”， 疾病都在教导我们如何与世界相处

身体原来是一份宝贵的“情绪地图”， 疾病都在教导我们如何与世界相处

当我们生病时 很多时候&#xff0c;是一个契机 让我们来倾听自己内心的压抑的真实 聆听身体的声音 身体能够教会我们如何对待情绪 进而教导我们如何与世界相处 -1- 身体上&#xff0c;有你的情绪地图 皮肤是身体的镜子&#xff0c;身体则是心灵的镜子。生病&#xff0c…
阅读更多...
什么是微服务

什么是微服务

微服务的架构特征&#xff1a; 单一职责&#xff1a;微服务拆分粒度更小&#xff0c;每一个服务都对应唯一的业务能力&#xff0c;做到单一职责自治&#xff1a;团队独立、技术独立、数据独立&#xff0c;独立部署和交付面向服务&#xff1a;服务提供统一标准的接口&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023