理解 CSS 中的 Containing Block

news2024/9/22 13:41:08

前言

在开始本文之前先来看一个例子，下面一段简单的 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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

clickhouse调研报告2

clickhouse调研报告2

由Distributed表发送分片数据 clickhouse分区目录合并 clickhouse副本协同流程 clickhouse索引查询逻辑 clickhouse一级索引生成逻辑(两主键) clickhouse的data目录下包含如下目录： [root@brfs-stress-01 201403_10_10_0]# ll /data01/clickhouse/data total 4 drwxr-x---…
阅读更多...
【Linux操作系统】网络配置详解：从原理到实践（详细通俗讲明DNS）

【Linux操作系统】网络配置详解：从原理到实践（详细通俗讲明DNS）

导语&#xff1a;网络配置是Linux系统中的一项重要任务&#xff0c;合理的网络配置可以保证计算机与其他设备的正常通信。本文将详细介绍Linux网络配置的原理和实践&#xff0c;包括网络配置原理、查看网络IP和网关、测试网络连通性、网络环境配置、设置主机名和hosts映射以及主…
阅读更多...
获取全部的地区并生成表格

获取全部的地区并生成表格

思路 写文章的时间2023-8-4&#xff0c;大部分网页设置的区域都是先是省&#xff0c;然后通过省获取对应的市&#xff0c;再通过市获取对应的区&#xff0c;以此类推。所以模拟的请求也是按照这个逻辑&#xff0c;先获取所有的省&#xff0c;再获取所有的市&#xff0c;最后获取…
阅读更多...
【2023华数杯全国大学生数学建模竞赛】C题 母亲身心健康对婴儿成长的影响第一、二问

【2023华数杯全国大学生数学建模竞赛】C题 母亲身心健康对婴儿成长的影响第一、二问

第一问部分截图 第二问部分截图 参考文献 理论和可直接运行代码获取参见&#xff1a;理论和可直接运行代码获取参见&#xff1a;理论和可直接运行代码获取参见&#xff1a;理论和可直接运行代码获取参见&#xff1a; 有人看的话更新后续问题思路。
阅读更多...
【项目经验】产研流程（超级详细的步骤）

【项目经验】产研流程（超级详细的步骤）

一、产研流程简述 项目立项-——定需求——Sprint需求宣讲会——技术方案——技术方案评审会——开发及单元测试——测试用例评审会——提测——测试——Sprint评审会——发版——Sprint复盘会 二、产研流程详情 以下部分根据Sprint里程碑节点进行循环&#xff08;sprint周期…
阅读更多...
Java8实战-总结12

Java8实战-总结12

Java8实战-总结12 Lambda表达式Lambda 和方法引用实战第1步&#xff1a;传递代码第2步&#xff1a;使用匿名类第3步&#xff1a;使用Lambda表达式第4步&#xff1a;使用方法引用 复合Lambda表达式的有用方法比较器复合逆序比较器链 函数复合 Lambda表达式 Lambda 和方法引用实…
阅读更多...
【C++】从无到有了解并掌握C++面向对象编程的三大特性——封装、继承、多态

【C++】从无到有了解并掌握C++面向对象编程的三大特性——封装、继承、多态

前置知识&#xff1a;类和对象 参考书籍&#xff1a;《C Primer 第五版》 目录 什么是面向过程&#xff1f;什么是面向对象&#xff1f; 一、封装 1、封装的含义以及如何实现封装 1.1 访问限定符&#xff08;访问说明符&#xff09; 1.2 什么是封装&#xff1f; 2、封装的优点…
阅读更多...
2023年华数杯选题人数发布！！

2023年华数杯选题人数发布！！

该选题人数&#xff0c;主要基于根据各个平台开赛后12小时各项数据统计&#xff0c;进行评估&#xff08;方法见注释&#xff09;&#xff0c;最终得出2023年华数杯选选题人数&#xff0c;大致为 题号选题人数A120B159C420 注释&#xff1a;选题人数来源&#xff1a;源自各个平…
阅读更多...
Java字符串常量池以及new String(“abc“)到底创建了几个对象？各种字符串到底相不相等？

Java字符串常量池以及new String(“abc“)到底创建了几个对象？各种字符串到底相不相等？

new String(“abc”)到底创建了几个对象&#xff1f; 字符串常量池 是 JVM 为了提升性能和减少内存消耗针对字符串&#xff08;String 类&#xff09;专门开辟的一块区域&#xff0c;主要目的是为了避免字符串的重复创建。 1.如果字符串常量池中不存在“abc”的引用&#xff…
阅读更多...
GD32F103VE外部中断

GD32F103VE外部中断

GD32F103VE外部中断线线0~15&#xff0c;对应外部IO口的输入中断。它有7个中断向量&#xff0c;外部中断线0 ~ 4分别对应EXTI0_IRQn ~ EXTI4_IRQn中断向量&#xff1b;外部中断线 5 ~ 9 共用一个 EXTI9_5_IRQn中断向量&#xff1b;外部中断线10~15 共用一个 EXTI15_10_IRQn中断…
阅读更多...
深入探索Vue.js核心技术与跨平台开发uni-app实战

深入探索Vue.js核心技术与跨平台开发uni-app实战

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 前言 在当今Web应用不断…
阅读更多...
小程序商城免费搭建之java商城 电子商务Spring Cloud+Spring Boot+二次开发+mybatis+MQ+VR全景+b2b2c bbc

小程序商城免费搭建之java商城 电子商务Spring Cloud+Spring Boot+二次开发+mybatis+MQ+VR全景+b2b2c bbc

​ 1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前…
阅读更多...
7、Kubernetes核心技术 - Secret

7、Kubernetes核心技术 - Secret

目录 一、Secret概述 二、Secret 三种类型 2.1、Opaque 2..2、kubernetes.io/dockerconfigjson 2.3、kubernetes.io/service-account-token 三、Secret创建 3.1、命令行方式创建 Secret 3.2、yaml方式创建 Secret 四、Secret解码 五、Secret使用 5.1、将 Secret 挂载…
阅读更多...
Mybatis实现JsonObject对象与JSON之间交互

Mybatis实现JsonObject对象与JSON之间交互

项目中使用PostGresql数据库进行数据存储&#xff0c;表中某字段为Json类型&#xff0c;用于存储Json格式数据。PG数据库能够直接存储Json算是一大特色&#xff0c;很多特定情境下使用直接存储Json字段数据能够大量节省开发时间&#xff0c;提高后台数据查询和转换效率。 1、基…
阅读更多...
第三章 图论 No.1单源最短路及其综合应用

第三章 图论 No.1单源最短路及其综合应用

文章目录 1129. 热浪1128. 信使1127. 香甜的黄油1126. 最小花费920. 最优乘车903. 昂贵的聘礼1135. 新年好340. 通信线路342. 道路与航线341. 最优贸易 做乘法的最短路时&#xff0c;若权值>0&#xff0c;只能用spfa来做&#xff0c;相等于加法中的负权边 1129. 热浪 1129.…
阅读更多...
Spring接口ApplicationRunner的作用和使用介绍

Spring接口ApplicationRunner的作用和使用介绍

在Spring框架中&#xff0c;ApplicationRunner接口是org.springframework.boot.ApplicationRunner接口的一部分。它是Spring Boot中用于在Spring应用程序启动完成后执行特定任务的接口。ApplicationRunner的作用是在Spring应用程序完全启动后&#xff0c;执行一些初始化任务或处…
阅读更多...
W6100-EVB-PICO做DNS Client进行域名解析（四）

W6100-EVB-PICO做DNS Client进行域名解析（四）

前言 在上一章节中我们用W6100-EVB-PICO通过dhcp获取ip地址&#xff08;网关&#xff0c;子网掩码&#xff0c;dns服务器&#xff09;等信息&#xff0c;给我们的开发板配置网络信息&#xff0c;成功的接入网络中&#xff0c;那么本章将教大家如何让我们的开发板进行DNS域名解…
阅读更多...
python二级用哪个版本的软件,二级python用哪个版本

python二级用哪个版本的软件,二级python用哪个版本

大家好&#xff0c;给大家分享一下python二级用哪个版本的软件&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; Python开发软件可根据其用途不同分为两种&#xff0c;一种是Python代码编辑器&#xff0c;一种是Python集成开发工具&#xff…
阅读更多...
Mac显示隐藏文件夹

Mac显示隐藏文件夹

1、设置隐藏文件可见 defaults write com.apple.finder AppleShowAllFiles TRUE 2、killall Finder killall Finder
阅读更多...
H3C交换机如何清除接口配置信息

H3C交换机如何清除接口配置信息

环境&#xff1a; H3C S6520-26Q-SI 问题描述&#xff1a; H3C交换机如何清除接口配置信息 解决方案&#xff1a; 在接口下使用default命令 [H3C-Ten-GigabitEthernet1/0/3]dis th # interface Ten-GigabitEthernet1/0/3port link-mode bridgeport link-type trunkport tr…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023