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

【CSS】包含块

news 2026/5/25 2:26:58

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

【ChatGPT】阳极氧化线 Global SI 自动化系统深度拆解、爆炸图10张、信息图10张、C++代码框架

深度拆解爆炸图...

编程新知 2026/5/25 2:25:44

《当下的力量》7-10章终章解读：从临在到臣服，活出生命的终极自由

《当下的力量》7-10章终章解读&#xff1a;从临在到臣服&#xff0c;活出生命的终极自由终章&#xff1a;这是全书最具力量的部分&#xff0c;它将告诉你如何在最艰难的人生境遇中&#xff0c;依然保持内心的平静与自由前言 在前六章中&#xff0c;我们已经了解了人类痛苦的根源…...

编程新知 2026/5/24 23:19:22

通过Hermes Agent对接Taotoken自定义模型提供方

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过Hermes Agent对接Taotoken自定义模型提供方 Hermes Agent是一个流行的AI Agent开发框架&#xff0c;它支持通过统一的接口调用…...

编程新知 2026/5/24 22:58:13

170家具身智能公司名单

点击下方卡片&#xff0c;关注“CVer”公众号AI/CV重磅干货&#xff0c;第一时间送达具身智能&#xff1a;人工智能的下一个浪潮&#xff01;今年再次被写入《政府工作报告》中&#xff0c;已经成为国家未来重点培育产业。市场方面&#xff0c;具身智能近一年融资更是爆火&…...

编程新知 2026/5/24 22:56:11

【教育科技爆款内容生产核心】：用ChatGPT批量生成带答案解析+难度分级+认知维度标签的脑筋急转弯（附可商用JSON Schema）

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;教育科技爆款内容生产的底层逻辑重构 教育科技领域的“爆款”并非偶然产物&#xff0c;而是内容价值、用户认知路径与算法分发机制三者深度耦合的结果。传统以课程大纲为中心的线性生产范式&#xff0c;正被“…...

编程新知 2026/5/24 22:51:55

等保2.0三级Linux服务器合规基线重建实战指南

1. 为什么等保2.0整改不是“打补丁”&#xff0c;而是重装操作系统级的系统工程你刚接手一台跑了三年的CentOS 7服务器&#xff0c;业务跑得稳&#xff0c;监控没告警&#xff0c;运维日志里连个WARNING都少见——但等保测评报告第一页就写着&#xff1a;“操作系统未满足等保2…...

编程新知 2026/5/24 22:14:30

微信M4A文件打不开怎么办？m4a转MP3只需一招，小白也能操作

很多人会遇到这种情况&#xff1a;别人通过微信发来一段录音、会议音频、课程音频或者采访素材&#xff0c;文件后缀是.m4a&#xff0c;在微信里可能能播放&#xff0c;但保存到手机本地、发到电脑、导入剪辑软件或者复制到U盘后&#xff0c;就可能出现打不开、无法识别、格式不…...

编程新知 2026/5/24 21:08:49

校准机器学习与SHAP分析：构建可信专利价值评估模型

1. 项目概述&#xff1a;从“黑盒”预测到“透明”评估的跨越在技术管理和投资决策领域&#xff0c;判断一项专利或技术的长期价值&#xff0c;一直是个既关键又棘手的难题。传统的专家评估方法虽然能结合行业洞见&#xff0c;但往往耗时费力、主观性强&#xff0c;且难以应对海…...

编程新知 2026/5/24 21:04:39

告别黑屏！手把手教你为OpenEuler 22.03 LTS配置漂亮的XFCE桌面（附LightDM背景修复）

告别黑屏&#xff01;手把手教你为OpenEuler 22.03 LTS配置漂亮的XFCE桌面&#xff08;附LightDM背景修复&#xff09;第一次在OpenEuler上看到XFCE桌面时&#xff0c;那种"服务器变工作站"的惊喜感至今难忘。但默认安装后的黑屏登录界面和简陋的桌面环境&#xff0c…...

编程新知 2026/5/24 19:47:22

哔哩下载姬DownKyi：零基础掌握B站视频高效下载与管理

哔哩下载姬DownKyi&#xff1a;零基础掌握B站视频高效下载与管理 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频提取、去水印等&#x…...

编程新知 2026/5/24 19:10:51