包含块

栏目: Html · 发布时间: 5年前

内容简介:一个元素的占用面积大小以及布局定位通常受到包含块一般情况下是当前元素的最近的祖先块元素的浏览器渲染文档时,对于每一个元素,都会有一个布局盒子,该盒子又被划分为四个区域。

一个元素的占用面积大小以及布局定位通常受到 包含块(Containing Block) 的影响,比如 topleft 取百分比时相对的长度是什么长度, widthheight 取百分比时相对的长度是什么长度?

包含块一般情况下是当前元素的最近的祖先块元素的 内容区域 ,但具体还需要分情况来确定。

布局区域

浏览器渲染文档时,对于每一个元素,都会有一个布局盒子,该盒子又被划分为四个区域。

  • 内容区域—— Content Area
  • 内边距区域—— Padding Area
  • 边框区域—— Border Area
  • 外边距区域—— Margin Area

包含块

box-sizing 设为 border-box,会影响 width 和 height 的计算,但不影响布局区域的划分。

确定包含块

根据元素的 position 属性值来确定它对应的包含块:

  1. 如果是根元素,那么就是视窗
  2. 如果 position 属性值是 static (不设置时的默认值)或者 relative 是,那么包含块就是它最近的祖先块元素或块格式化上下文(如浮动元素、表格单元格、弹性元素、网格元素等)的 内容区域
  3. 如果 position 属性值是 fixed ,那么包含块是视窗,除非满足 5 的条件
  4. 如果 position 属性值是 absolute ,那么包含块是最近的 position 属性值不是 static 的祖先元素的 内边距区域 ,除非满足 5 的条件
  5. 如果 position 属性值是 absolutefixed ,包含块也可能是满足以下任一条件的的最近的祖先级元素的 内边距区域

transformperspective 属性值不是 none
will-change 的属性值是 transformperspective
filter 属性值不是 nonewill-change 属性值是 filter (仅 Firefox)

根据包含块计算百分比值

部分属性使用百分比值时,计算值根据这个元素的包含块计算而来,包括:

1. heighttopbottom 中的百分比值,通过包含块的 height 值。如果包含块的 height 值会根据它的内容而变化(如没设置 height 或设为 auto),而且包含块的 position 属性值时 relativestatic ,那么这些计算值为 0

2. widthleftrightpaddingmargin 这些属性的百分比值通过包含块的 width 属性值来计算。

详细实例参考 MDN 文档

参考资料


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序化广告实战

程序化广告实战

吴俊 / 机械工业出版社 / 2017-8-15 / 79.00元

中国程序化广告领域领袖级专家,私有化程序购买领域的布道者的一线实战笔记,宋星等近20位专家联袂推荐。从业务和技术双重视角系统讲解程序化广告的理论、知识、实践方法和关键要点。一起来看看 《程序化广告实战》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

随机密码生成器
随机密码生成器

多种字符组合密码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具