小居

月度归档： 2019 年 2 月

  • 包含块

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

    布局区域

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

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

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

    （更多…）

  • 视窗百分比长度

    视窗百分比长度是指相对于视窗1的尺寸，包含了 vw、vh、vmin 和 vmax。

    • vw：视窗宽度的 1%
    • vh：视窗高度的 1%
    • vmin：min(vw, vh)
    • vmax：max(vh, vh)

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

    参考资料

    1. Viewport ↩︎