当前位置： 首页 > news >正文

【CSS】包含块

news 2026/4/5 20:02:52

CSS规范中的包含块

包含块的内容：

元素的尺寸和位置，会受它的包含块所影响。

对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值（比如 position 被设置为 absolute 或 fixed），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。

包含块分为两种：

一种是根元素（HTML 元素）所在的包含块，被称之为初始包含块（initial containing block）。对于浏览器而言，初始包含块的的大小等于视口 viewport 的大小，基点在画布的原点（视口左上角）。它是作为元素绝对定位和固定定位的参照物。

另外一种是对于非根元素，对于非根元素的包含块判定就有几种不同的情况了。大致可以分为如下几种：

  • 如果元素的 positiion 是 relative 或 static ，那么包含块由离它最近的块容器（block container）的内容区域（content area）的边缘建立。
  • 如果 position 属性是 fixed，那么包含块由视口建立。
  • 如果元素使用了 absolute 定位，则包含块由它的最近的 position 的值为fixed（、absolute、relative 或 sticky）的祖先元素的内边距区的边缘组成。

第三条举个例子：

<body><div class="container"><div class="item"><div class="item2"></div></div></div></body>

.container {width: 500px;height: 300px;background-color: skyblue;position: relative;
}
.item {width: 300px;height: 150px;border: 5px solid;margin-left: 100px;
}
.item2 {width: 100px;height: 100px;background-color: red;position: absolute;left: 10px;top: 10px;
}
image-20220814233548188

对于 div.item2 来讲，它的包含块应该是 div.container，而非 div.item。

对于非根元素来讲，包含块还有一种可能，那就是如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件之一(或多)的最近父级元素的内边距区的边缘组成的：

  • transform 或 perspective 的值不是 none
  • will-change 的值是 transform 或 perspective
  • filter 的值不是 none 或 will-change 的值是 filter(只在 Firefox 下生效)
  • contain 的值是 paint (例如: contain: paint;)

其他包含块的知识见MDN：MDN包含块。

相关文章：

【CSS】包含块

CSS规范中的包含块 包含块的内容&#xff1a; 元素的尺寸和位置&#xff0c;会受它的包含块所影响。 对于一些属性&#xff0c;例如 width, height, padding, margin&#xff0c;绝对定位元素的偏移值&#xff08;比如 position 被设置为 absolute 或 fixed&#xff09;&…...

编程日记 2023/10/28 21:26:33

[SpringCloud] Nacos 简介

目录 一、Nacos&#xff0c;启动&#xff01; 1、安装 Nacos 2、运行 Nacos 3、Nacos 服务注册 二、Nacos 服务多级存储模型 1、服务跨集群分配 2、NacosRule 负载均衡&#xff08;优先本地&#xff09; 3、服务实例的权重设置 4、环境隔离 三、Nacos 注册中心细节分…...

编程日记 2023/10/28 21:25:31

TypeScript - 字符串的字面类型

啥是字面量类型 字面量类型&#xff0c;是限制了一个字符串变量的取值范围只能某几个固定字符串中的一个。 我感觉 与枚举类型有异曲同工之妙。 字符串字面量类型有啥用 没啥用。 就是来限制字符串变量不能随便赋值的。 定义一个我看看 让你读书&#xff0c;但是只有四本书可以…...

编程日记 2023/10/28 21:23:28

CRM客户管理系统源码 带移动端APP+H5+小程序

CRM客户管理系统源码 带移动端APPH5小程序 开发环境: thinkphp mysql 功能介绍&#xff1a; 1、 办公管理&#xff1a;审批管理、工作报告、日程管理、办公审批、公告管理 2、 客户管理&#xff1a;我的客户、客户列表、成交客户、行业类别、预查、地区列表、客户状态、客…...

编程日记 2023/10/28 21:22:27

Mac版好用的Git客户端 Fork 免激活

Fork是一款强大的Git客户端软件&#xff0c;在Mac和Windows操作系统上都可以使用。汇集了众多先进的功能和工具&#xff0c;可以帮助用户更方便地管理和控制Git仓库。 Fork的界面简洁直观&#xff0c;易于使用。它提供了许多高级的Git功能&#xff0c;如分支管理、合并、提交、…...

编程日记 2023/10/28 21:21:25

有一个带头结点的单链表L，设计一个算法使其元素递增有序

有一个带头结点的单链表L&#xff0c;设计一个算法使其元素递增有序 代码思路&#xff1a; 我这里懒得搞那个指针了&#xff0c;直接遍历一遍链表&#xff0c;把链表的元素复制到数组arr里面 对数组A进行一下排序&#xff0c;排完之后再把元素复制到L里面。 至于排序你用啥算…...

编程日记 2023/10/28 21:20:24

JAVA将EEE MMM dd HH:mm:ss zzz yyyy日期格式化为yyyy-MM-dd HH:mm:ss形式

1、将EEE MMM dd HH:mm:ss zzz yyyy格式的数据转换成yyyy-MM-dd HH:mm:ss 代码如下 public static void main(String[] args) throws ParseException {String dateStr "Mon Oct 26 15:19:15 CST 2020";DateFormat cstFormate new SimpleDateFormat("yyyy-MM…...

编程日记 2023/10/28 21:19:24

【Qt】文件系统

文章目录 文件系统文件操作案例&#xff1a;显示路径到标题框&#xff0c;显示内容到文本框对文件进行写操作获取文件相关信息 文件系统 Qt 通过QIODevice提供了对 I/O 设备的抽象&#xff0c;这些设备具有读写字节块的能力&#xff0c;下面是 I/O 设备的类图&#xff1a; QIO…...

编程日记 2023/10/28 21:18:23

PostgreSQL 基础知识

执行环境&#xff1a; psql 1. 创建一个表格 CREATE TABLE customers ( customer_id serial PRIMARY KEY,firstname VARCHAR(100) NOT NULL,lastname VARCHAR(100) NOT NULL,username VARCHAR(50) UNIQUE NOT NULL,password VARCHAR(50) NOT NULL,email VARCHAR(255) UNIQUE …...

编程日记 2023/10/28 21:17:22

基于 ResNet18 架构使用 deformable convolution的车道线检测

下面是一个基于关键点的车道线检测网络的 PyTorch 代码示例&#xff0c;其中使用了 deformable convolution。该代码示例基于 ResNet18 架构&#xff0c;可以根据实际情况进行修改。 首先&#xff0c;需要导入必要的库和模块&#xff1a; import torch import torch.nn as nn…...

编程日记 2023/10/28 21:15:19

C++in/out输入输出流[IO流]

文章目录 1. C语言的输入与输出2.C的IO流2.1流的概念2.2CIO流2.3刷题常见while(cin >> str)重载强制类型转换运算符模拟while(cin >> str) 2.4C标准IO流2.5C文件IO流1.ifstream 1. C语言的输入与输出 C语言用到最频繁的输入输出方式就是scanf ()与printf()。 scanf…...

编程日记 2023/10/28 21:14:19

MongoDB的安装

MongoDB的安装 1、Windows下MongoDB的安装及配置 1.1 下载Mongodb安装包 下载地址&#xff1a; https://www.mongodb.com/try/download http://www.mongodb.org/dl/win32 MongoDB Windows系统64位下载地址&#xff1a;http://www.mongodb.org/dl/win32/x86_64 MongoDB W…...

编程日记 2023/10/28 21:13:18

SQL查询优化---如何查询截取分析

慢查询日志 1、慢查询日志是什么 MySQL的慢查询日志是MySQL提供的一种日志记录&#xff0c;它用来记录在MySQL中响应时间超过阀值的语句&#xff0c;具体指运行时间超过long_query_time值的SQL&#xff0c;则会被记录到慢查询日志中。 具体指运行时间超过long_query_time值的…...

编程日记 2023/10/28 21:11:15

vue3基础流程

目录 1. 安装和创建项目 2. 项目结构 3. 主要文件解析 3.1 main.js 3.2 App.vue 4. 组件和Props 5. 事件处理 6. 生命周期钩子 7. Vue 3的Composition API 8. 总结和结论 响应式系统&#xff1a; 组件化&#xff1a; 易于学习&#xff1a; 灵活性&#xff1a; 社…...

编程日记 2023/10/28 21:10:14

Vue 数据绑定 和 数据渲染

目录 一、Vue快速入门 1.简介 : 2.MVVM : 3.准备工作 : 二、数据绑定 1.实例 : 2.验证 : 三、数据渲染 1.单向渲染 : 2.双向渲染 : 一、Vue快速入门 1.简介 : (1) Vue[/vju/]&#xff0c;是Vue.js的简称&#xff0c;是一个前端框架&#xff0c;常用于构建前端用户…...

编程日记 2023/10/28 21:09:13

【原创】解决Kotlin无法使用@Slf4j注解的问题

前言 主要还是辟谣之前的网上的用法&#xff0c;当然也会给出最终的使用方法。这可是Kotlin&#xff0c;关Slf4j何事&#xff01;&#xff1f; 辟谣内容&#xff1a;创建注解来解决这个问题 例如&#xff1a; Target(AnnotationTarget.CLASS) Retention(AnnotationRetentio…...

编程日记 2023/10/28 21:08:12

CDN是如何实现全球节点同步的

当谈到内容交付网络&#xff08;Content Delivery Network&#xff0c;CDN&#xff09;加速时&#xff0c;我们必须了解CDN是如何实现全球节点同步的。CDN是一种网络架构&#xff0c;通过将内容分发到全球各地的服务器节点&#xff0c;以降低用户访问网站或应用程序时的延迟和提…...

编程日记 2023/10/28 21:07:11

Centos7 Linux系统下生成https的crt和key证书

linux下生成https的crt和key证书 步骤如下&#xff1a; x509证书一般会用到三类文&#xff0c;key&#xff0c;csr&#xff0c;crt Key 是私用密钥openssl格&#xff0c;通常是rsa算法。 Csr 是证书请求文件&#xff0c;用于申请证书。在制作csr文件的时&#xff0c;必须使…...

编程日记 2023/10/28 21:06:10

性能测试工具——Jmeter的安装【超详细】

目录 1、性能测试工具&#xff1a;JMeter和LoadRunner对比 2、为什么学习JMeter&#xff1f; 3、JMeter环境搭建 3.1、安装JDK 3.2、下载安装JMeter 3.3、配置环境变量 2.4、启动验证JMeter是否安装成功 4、认识JMeter的目录结构 1&#xff09;bin目录&#xff1a;存放…...

编程日记 2023/10/28 21:04:08

系列三十、Spring AOP vs AspectJ AOP

一、关系 &#xff08;1&#xff09;当在Spring中要使用Aspect、Before、After等注解时&#xff0c;需要添加AspectJ的相关依赖&#xff0c;如下 <dependency><groupId>cglib</groupId><artifactId>cglib</artifactId><version>3.1</…...

编程日记 2023/10/28 21:03:07

Dual-Loop Adaptive AI System Whitepaper（DLAAS）双环自适应AI系统正式命名白皮书

Dual-Loop Adaptive AI System Whitepaper&#xff08;DLAAS&#xff09;双环自适应AI系统—— 基于六元结构&#xff08;TSPR-WEB-LLM-HIC-A-F&#xff09;的生成式AI决策操作系统版权与所有权声明本技术系统的全部知识产权归以下主体独家所有&#xff1a;拓世网络技术开发室&…...

编程新知 2026/4/5 20:01:37

PowerToys Image Resizer：三步解决全场景图片批量处理难题

PowerToys Image Resizer&#xff1a;三步解决全场景图片批量处理难题 【免费下载链接】PowerToys Microsoft PowerToys is a collection of utilities that supercharge productivity and customization on Windows 项目地址: https://gitcode.com/GitHub_Trending/po/Power…...

编程新知 2026/4/5 19:49:26

从继电器到模拟开关：用CircuitJS带你搞懂‘开关控制开关’的进化史

从继电器到模拟开关&#xff1a;用CircuitJS带你搞懂‘开关控制开关’的进化史 在电子工程的发展历程中&#xff0c;开关器件从笨重的机械结构演变为集成电路中的微小模块&#xff0c;这一过程不仅是技术的进步&#xff0c;更是设计思维的抽象化革命。当你第一次在CircuitJS仿真…...

编程新知 2026/4/5 19:29:05

外文游戏语言障碍如何破解？XUnity.AutoTranslator通过实时文本转换技术实现无缝游戏体验

外文游戏语言障碍如何破解&#xff1f;XUnity.AutoTranslator通过实时文本转换技术实现无缝游戏体验 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 面对喜爱的外文游戏却因语言隔阂无法深入体验&#xf…...

编程新知 2026/4/5 19:25:04

从电桥到差分放大：三线制PT100测温电路的设计实践与精度考量

1. 三线制PT100测温电路的设计背景 温度测量在工业自动化、医疗设备、环境监测等领域都是基础且关键的技术需求。PT100作为一种广泛使用的铂电阻温度传感器&#xff0c;凭借其优异的线性度和稳定性&#xff0c;成为高精度测温的首选之一。但在实际应用中&#xff0c;如何准确测…...

编程新知 2026/4/5 18:20:08

**光计算驱动下的编程新范式：用Python探索光子芯片加速的AI推理**在传统电子计算面临物理极限

光计算驱动下的编程新范式&#xff1a;用Python探索光子芯片加速的AI推理 在传统电子计算面临物理极限的今天&#xff0c;**光计算&#xff08;Photonic Computing&#xff09;**正从实验室走向产业化落地。它利用光子替代电子进行信息传输和处理&#xff0c;具备超低功耗、超…...

编程新知 2026/4/5 17:39:36

OFA视觉蕴含模型快速入门：Web界面操作，轻松实现图文验证

OFA视觉蕴含模型快速入门&#xff1a;Web界面操作&#xff0c;轻松实现图文验证 1. 认识OFA视觉蕴含模型 1.1 什么是视觉蕴含&#xff1f; 想象一下这样的场景&#xff1a;你看到一张照片&#xff0c;里面有两只猫在玩耍。如果有人问"照片里有动物吗&#xff1f;"…...

编程新知 2026/4/5 17:19:22

效率倍增：用快马生成openclaw一键式部署与配置工具

效率倍增&#xff1a;用快马生成openclaw一键式部署与配置工具 最近在团队协作时遇到了一个头疼的问题&#xff1a;每次新成员加入或者更换开发机&#xff0c;都需要手动部署openclaw环境。这个过程中不仅需要重复下载、解压、配置&#xff0c;还经常因为网络代理、权限等问题…...

编程新知 2026/4/5 17:15:17

NFL十年追踪数据与机器学习创新

某机构十年NFL下一代数据统计创新 每场NFL比赛都会产生数百万个来自22名佩戴RFID设备的球员的追踪数据点。75个机器学习模型在云端处理这些数据&#xff0c;耗时不到一秒&#xff0c;将橄榄球运动转变为每一次移动都被测量、建模并即时分析的运动。 最初&#xff0c;每支俱乐部…...

编程新知 2026/4/5 17:05:12

实战演练：基于快马平台快速开发数据库连接池监控与告警脚本

实战演练&#xff1a;基于快马平台快速开发数据库连接池监控与告警脚本 最近线上应用频繁出现响应缓慢的问题&#xff0c;经过初步排查&#xff0c;怀疑是数据库连接数过多导致的。作为运维工程师&#xff0c;我们需要快速开发一个监控脚本&#xff0c;实时掌握数据库连接状态…...

编程新知 2026/4/5 16:34:57