月度归档:2019年02月

包含块

一个元素的占用面积大小以及布局定位通常受到包含块(Containing Block)的影响,比如 topleft 取百分比时相对的长度是什么长度,widthheight 取百分比时相对的长度是什么长度?
包含块一般情况下是当前元素的最近的祖先块元素1内容区域,但具体还需要分情况来确定。

布局区域

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

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

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

继续阅读

视窗百分比长度

视窗百分比长度是指相对于视窗1的尺寸,包含了 vwvhvminvmax

  • vw:视窗宽度的 1%
  • vh:视窗高度的 1%
  • vminmin(vw, vh)
  • vmaxmax(vh, vh)

其中,视窗一般是指浏览器文档渲染窗口,但对于 iframe 里的文档而言,它们的视窗是 iframe 元素的 内容区域(content area) 的大小。

参考资料