absolute 的 containing block(容器块) 计算方式跟正常流有什么不同 ?

本文阅读 1 分钟
首页 前端笔记 正文

无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:

  • 若此元素为 inline 元素,则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形;
  • 否则,则由这个祖先元素的 padding box 构成。
  • 如果都找不到,则为 initial containing block。

补充:

  1. static / relative:简单说就是它的父元素的内容框(即去掉 padding 的部分)
  2. absolute: 向上找最近的定位为 absolute / relative 的元素
  3. fixed: 它的 containing block 一律为根元素(html / body),根元素也是 initialcontaining block
解压密码: detechn或detechn.com

免责声明

本站所有资源出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。

本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户自行鉴别,做一个有主见和判断力的用户。

本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。

一个满屏 品字布局 如何设计 ?
« 上一篇 03-12
canvas 与 svg 的区别 ?
下一篇 » 03-12

发表评论