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

css包含块

news 2025/7/3 7:38:58

包含块

出现

在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

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/6/21 18:22:44

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/6/17 14:49:12

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/6/25 14:50:21

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/6/21 12:21:14

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/6/21 7:18:07

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/6/21 10:27:51

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2025/6/26 15:13:34

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/6/16 11:14:36

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/7/2 15:22:03

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2025/6/21 5:04:13