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

css包含块

news 2026/3/27 9:56:20

包含块

出现

在css中一些属性的计算可能超出你的预料，在普遍情况下会认为定位属性和百分比的宽高是根据父元素计算的，但是准确来说他们都是根据元素所在的包含块来计算的，所以掌握包含块的知识是非常关键的。

内容

在CSS中，“包含块”（Containing Block）是一个重要的概念，它决定了元素的定位和尺寸计算的基准。包含块可以是以下元素之一：

  1. 根元素：对于HTML文档中的根元素（通常是<html>），其包含块是视口（viewport），即浏览器窗口的大小。

  2. 定位元素：对于设置了position: relative;, position: absolute;, position: fixed;或position: sticky;的元素，其包含块是最近的已定位（即设置了position属性且不是static）的祖先元素。

  3. 行内元素：对于行内元素（如<span>），其包含块通常是其父元素的内边距（padding）区域。

  4. 表格单元格：对于表格单元格（<td>），其包含块是表格行（<tr>）。

  5. flex容器：对于flex项目的元素，其包含块是flex容器。

  6. grid容器：对于grid项目的元素，其包含块是grid容器。

  7. 块级元素：对于块级元素（如<div>），其包含块是最近的块级祖先元素的内边距区域。

  8. 浮动元素：对于浮动元素（设置了float属性的元素），其包含块是最近的块级祖先元素。

  9. 绝对定位元素：对于绝对定位的元素（position: absolute;），其包含块是最近的已定位的祖先元素。如果没有这样的祖先元素，那么包含块是初始包含块（通常是<html>元素）。

  10. 固定定位元素：对于固定定位的元素（position: fixed;），其包含块是视口。

  11. sticky元素：对于粘性定位的元素（position: sticky;），其包含块是最近的已定位的祖先元素，或者是视口，取决于元素的位置。

包含块的概念在进行元素定位和尺寸计算时非常重要，因为它决定了元素的起始位置和大小限制。例如，当你使用position: absolute;定位一个元素时，该元素将相对于其最近的已定位的祖先元素进行定位，这就是包含块的作用。

理解包含块对于编写灵活和可预测的CSS布局至关重要。

相关文章：

css包含块

包含块 出现 在css中一些属性的计算可能超出你的预料&#xff0c;在普遍情况下会认为定位属性和百分比的宽高是根据父元素计算的&#xff0c;但是准确来说他们都是根据元素所在的包含块来计算的&#xff0c;所以掌握包含块的知识是非常关键的。 内容 在CSS中&#xff0c;“…...

编程日记 2024/12/1 17:31:28

混沌工程/混沌测试/云原生测试/云平台测试

背景 私有云/公有云/混合云等具有复杂&#xff0c;分布式&#xff0c;环境多样性等特点&#xff0c;许多特殊场景引发的线上问题很难被有效发现。所以需要引入混沌工程&#xff0c;建立对系统抵御生产环境中失控条件的能力以及信心&#xff0c;提高系统面对未知风险得能力。 …...

编程日记 2024/12/1 17:30:26

研发设计数字化：PLM、PDM、ERP介绍及其区别

一、产品全生命周期管理的定义 1.1 产品全生命周期&#xff08;PLM&#xff09;发展背景 目前&#xff0c;数字化设计与制造的技术&#xff08;如CAX、DFX等&#xff09;已经在产品开发中得到广泛应用&#xff0c;而各种企业和产品管理软件&#xff08;如ERP、SCM、PDM、CRM等…...

编程日记 2024/12/1 17:29:23

Python练习51

Python日常练习 题目&#xff1a; 调用函数fun判断一个三位数是否“水仙花数”。 在main函数中从键盘输入一个三位数&#xff0c;并输 出判断结果。请编写fun函数。 说明&#xff1a; 所谓“水仙花数”是指一3位数&#xff0c;其各位数字立方和 等于该数本…...

编程日记 2024/12/1 17:28:21

Qt 前置课程 QtNFC

文章目录 详解 Qt NFC 模块&#xff08;QtNFC&#xff09;1. 什么是 NFC&#xff1f;2. NFC 的原理2.1 主动设备与被动设备2.2 三种工作模式2.3 数据交换 3. QtNFC 模块概述4. 使用 QtNFC 模块4.1 配置 .pro 文件 5. NFC 的常见应用场景6. QtNFC 模块的主要类6.1 QNearFieldMan…...

编程日记 2024/12/1 17:27:20

【论文阅读】 Learning to Upsample by Learning to Sample

论文结构目录 一、之前的上采样器二、DySample概述三、不同上采样器比较四、整体架构五、设计过程&#xff08;1&#xff09;初步设计&#xff08;2&#xff09;第一次修改&#xff08;3&#xff09;第二次修改&#xff08;4&#xff09;第三次修改 六、DySample四种变体七、复…...

编程日记 2024/12/1 17:26:19

堆排序（含证明）

引言 前面我们讲过堆的基本操作的实现&#xff0c;现在给定一个int类型的数组&#xff0c;里面存放的数据是无序的&#xff0c;我们如何利用堆的思想来实现数组内数据的升序排列或降序排列呢&#xff1f; 通过前面讲到的堆的实现&#xff0c;我们可以想到&#xff0c;我们再开…...

编程日记 2024/12/1 17:25:18

蓝桥杯模拟题不知名题目

题目:p是一个质数&#xff0c;但p是n的约数。将p称为是n的质因数。求2024最大质因数。 #include<iostream> #include<algorithm> using namespace std; bool fun(int x) {for(int i 2 ; i * i < x ; i){if(x % i 0)return false;}return true; } int main() …...

编程日记 2024/12/1 17:24:08

C#中的工厂模式

在C#中&#xff0c;工厂模式&#xff08;Factory Pattern&#xff09; 是一种常见的设计模式&#xff0c;它属于创建型模式&#xff0c;主要用于定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。通过使用工厂模式&#xff0c;客户端代码不需要直接实例化具体…...

编程日记 2024/12/1 17:23:04

深度学习与持续学习：人工智能的未来与研究方向

文章目录 1. 持续学习与深度学习1.1 深度学习的局限1.2 持续学习的定义 2. 目标与心智2.1 奖励假说2.2 心智的构成 3. 对研究方法的建议3.1 日常写作记录3.2 中立对待流行趋势 1. 持续学习与深度学习 1.1 深度学习的局限 深度学习注重“瞬时学习”&#xff0c;如ChatGPT虽在语…...

编程日记 2024/12/1 17:22:03

OGRE 3D----4. OGRE和QML共享opengl上下文

在现代图形应用开发中，OGRE（Object-Oriented Graphics Rendering Engine）和QML（Qt Modeling Language）都是非常流行的工具。OGRE提供了强大的3D渲染能力，而QML则用于构建灵活的用户界面。在某些应用场景中，我们需要在同一个应用程序中同时使用OGRE和QML，并且共享OpenGL…...

编程日记 2024/12/1 17:20:00

【Umi】常用配置

具体见&#xff1a;alias 1. 基础配置 1)配置别名alias 2)配置sourcemap devtool 配置项 3)添加hash 4)图片转base64 inlineLimit 配置项 5)设置JS压缩方式 jsMinifier (webpack) 、jsMinifierOptions 配置项 6)设置umi插件 plugins 配置项 7)设置打包后资源导入的路…...

编程日记 2024/12/1 17:17:58

Windows加固脚本

echo off REM 清屏 cls title 安全策略设置批处理 color f0 echo **************************************** echo write by afei echo https://www.jianshu.com/u/ea4c85fbe8c7 echo **************************************** pause cls color 3f echo ********************…...

编程日记 2024/12/1 17:15:56

玩游戏常常出现vc++runtime library error R6025 这是什么意思，该怎么解决?

当玩游戏时常常出现“vc runtime library error R6025”错误&#xff0c;这通常表明微软C开发运行库组件存在问题。以下是对该错误及其解决方法的详细解释&#xff1a; 错误含义 “vc runtime library error R6025”是一个与Visual C运行时库相关的错误&#xff0c;该错误表明…...

编程日记 2024/12/1 17:13:55

AGX orin下电控制

AGX orin下电主要有两种&#xff0c;一种通过软件控制下电&#xff0c;另一种通过按键强制关机。下电流程和电脑关机流程类似。 AGX orin核心板与扩展板 AGX orin核心板由英伟达生产&#xff0c;不提供原理图&#xff0c;通过下图所示连接器与扩展板连接。 AGX orin扩展板&am…...

编程日记 2024/12/1 17:12:54

flutter 报错 error: unable to find git in your path.

项目issue&#xff1a;WIndows: "Unable to find git in your PATH." if terminal is not in admin mode Issue #123995 flutter/flutter 解决办法&#xff0c; 方法一&#xff1a;每次想要运行flutter的时候以管理员方式运行&#xff0c;比如以管理方式运行vsco…...

编程日记 2024/12/1 17:10:52

芯科科技率先支持Matter 1.4，推动智能家居迈向新高度

Matter 1.4引入核心增强功能、支持新设备类型&#xff0c;持续推进智能家居互联互通 近日&#xff0c;连接标准联盟&#xff08;Connectivity Standard Alliance&#xff0c;CSA&#xff09;发布了Matter 1.4标准版本。作为连接标准联盟的重要成员之一&#xff0c;以及Matter标…...

编程日记 2024/12/1 17:06:49

C语言数据相关知识：静态数据、越界与溢出

1、静态数组 在 C 语言中&#xff0c;数组一旦被定义后&#xff0c;占用的内存空间就是固定的&#xff0c;容量就是不可改变的&#xff0c;既不能在任何位置插入元素&#xff0c;也不能在任何位置删除元素&#xff0c;只能读取和修改元素&#xff0c;我们将这样的数组称为静态…...

编程日记 2024/12/1 17:05:46

文本分析之余弦相似度

余弦相似度（Cosine Similarity）是一种用于衡量两个非零向量之间相似度的指标，尤其常用于文本分析和自然语言处理领域。其核心思想是通过计算两个向量的夹角余弦值来评估它们的相似性。具体而言，余弦相似度的值范围从-1到1，其中1表示两个向量完全相同，0表示它们之间没有相…...

编程日记 2024/12/1 17:04:45

【VUE3】【Naive UI】＜n-button＞ 标签

【VUE3】【Naive UI】&#xff1c;n-button&#xff1e; 标签 **type**- 定义按钮的类型&#xff0c;这会影响按钮的颜色和样式。**size**- 设置按钮的大小。**disabled**- 布尔值&#xff0c;控制按钮是否处于禁用状态。**loading**- 布尔值&#xff0c;表示按钮是否处于加载状…...

编程日记 2024/12/1 17:03:44

利用OFA-Image-Caption自动生成Latex论文图表标题与描述

利用OFA-Image-Caption自动生成Latex论文图表标题与描述 写论文最烦人的步骤是什么&#xff1f;对我而言&#xff0c;除了反复修改格式&#xff0c;就是给那一大堆图表想标题和写描述了。一张图&#xff0c;你得想个既准确又简洁的标题&#xff0c;还得在正文里引用它&#xf…...

编程新知 2026/3/27 9:29:03

3步解除音乐枷锁：QMCDecode全场景音频解密指南

3步解除音乐枷锁&#xff1a;QMCDecode全场景音频解密指南 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#xff0c;默认转换结果…...

编程新知 2026/3/27 9:02:47

SecGPT-14B实战手册：Chainlit中集成Markdown渲染与代码块语法高亮

SecGPT-14B实战手册&#xff1a;Chainlit中集成Markdown渲染与代码块语法高亮 1. SecGPT-14B简介 SecGPT是由云起无垠推出的开源大语言模型&#xff0c;专门针对网络安全领域优化。该模型基于先进的自然语言处理技术&#xff0c;能够理解和生成与网络安全相关的专业内容。 S…...

编程新知 2026/3/27 5:55:00

Windows虚拟控制器驱动完全指南：如何用ViGEmBus实现游戏设备模拟

Windows虚拟控制器驱动完全指南&#xff1a;如何用ViGEmBus实现游戏设备模拟 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 你是否曾因游戏只支持特定手柄而…...

编程新知 2026/3/27 5:32:48

知识图谱项目实战（基础概念以及工具使用）【第一章】

在RAG以及Agent的应用领域中,知识图谱可以增强知识库的检索效果(通过搭建知识图谱数据库(GraphRag)实现).在教育医疗以及金融领域应用广泛.图谱&#xff08;graph&#xff09;有节点和边组成一.知识图谱理论1.1知识图谱的整体架构1.2知识图谱架构实现流程1. 文本标注(Doccano标…...

编程新知 2026/3/27 4:33:58

6种压缩黑科技如何彻底解决文件处理的效率难题

6种压缩黑科技如何彻底解决文件处理的效率难题 【免费下载链接】7-Zip-zstd 7-Zip with support for Brotli, Fast-LZMA2, Lizard, LZ4, LZ5 and Zstandard 项目地址: https://gitcode.com/gh_mirrors/7z/7-Zip-zstd 为何压缩工具总是陷入"速度与压缩率"的两难…...

编程新知 2026/3/27 4:29:58

Systemd配置文件修改后不生效？试试这个命令比重启更高效

Systemd配置热更新实战&#xff1a;如何用daemon-reexec替代服务重启 在Linux系统管理中&#xff0c;systemd作为现代init系统的代表&#xff0c;其配置调整是管理员日常工作的核心部分。但许多工程师在修改/etc/systemd/system.conf这类全局配置后&#xff0c;往往陷入两难&am…...

编程新知 2026/3/27 3:17:02

3种方法让加密音乐重获自由：Unlock Music浏览器解密工具详解

3种方法让加密音乐重获自由&#xff1a;Unlock Music浏览器解密工具详解 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地址:…...

编程新知 2026/3/27 2:36:45

酷狗音乐API实战指南：解决音乐应用开发的三大核心痛点

酷狗音乐API实战指南&#xff1a;解决音乐应用开发的三大核心痛点 【免费下载链接】KuGouMusicApi 酷狗音乐 Node.js API service 项目地址: https://gitcode.com/gh_mirrors/ku/KuGouMusicApi 在构建现代音乐应用时&#xff0c;开发者常常面临歌词同步不精准、API接口分…...

编程新知 2026/3/27 2:20:42

解锁Ghidra：面向逆向工程师的二进制分析工具指南

解锁Ghidra&#xff1a;面向逆向工程师的二进制分析工具指南 【免费下载链接】ghidra_installer Helper scripts to set up OpenJDK 11 and scale Ghidra for 4K on Ubuntu 18.04 / 18.10 项目地址: https://gitcode.com/gh_mirrors/gh/ghidra_installer 剖析Ghidra核心…...

编程新知 2026/3/27 2:06:40