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

【CSS】包含块

news 2025/11/6 4:21:11

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

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/10/22 15:55:37

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/10/31 17:52:25

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/11/3 17:57:11

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/11/1 20:53:34

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/11/5 17:01:57

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/10/26 1:09:31

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

编程新知 2025/10/13 23:55:54

在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南

在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点（小球运动模拟）6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...

编程新知 2025/7/7 1:11:39