css包含块

包含块

出现

在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布局至关重要。

相关推荐
华洛16 分钟前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼23 分钟前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔1 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗1 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥1 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
szial1 小时前
为什么 React 推荐 “不可变更新”:深入理解 React 的核心设计理念
前端·react.js·前端框架
mapbar_front1 小时前
面试是一门学问
前端·面试
90后的晨仔2 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)?
前端·vue.js
90后的晨仔2 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(一)?
前端·vue.js
90后的晨仔2 小时前
Vue 异步组件(defineAsyncComponent)全指南:写给新手的小白实战笔记
前端·vue.js