Skip to content

Layout

Jump to bottom
xlfsummer edited this page Jun 19, 2020 · 6 revisions

元素定位方式

不同于 css， mp-painter 的定位中只有 top, left 没有 margin, padding, right 或 bottom。

当元素为静态定位时，可把 top, left 当作 css 中的 margin-top, margin-left。

当元素为绝对定位时，可把 top, left 当作 css 中的 top, left。

静态定位与绝对定位

每个绘制元素选项都有 position 属性，position 属性可取 "static" 或 "absolute"，一般只有在 container 的子元素中你才会用到它们，因为只有 container 可以包含多个子元素。

静态定位的布局方向

container 的 direction 属性表示 container 中子元素的排列方向

  • 当 direction 为 "vertical" 时，子元素竖直排列，这是默认值
  • 当 direction 为 "horizontal" 时，子元素水平排列

竖直排列

container 的 direction 为 "vertical"， 有子元素 child1 和 child2 并且它们的 position 为 "static" 时

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓┅┅┅
┃  container             ↑          ┃ ↑
┃                   child1.top      ┃ │
┃                        ↓          ┃ │
┃               ┌────────────────┐  ┃ │
┃← child1.left →│     child1     │  ┃ │
┃               └────────────────┘  ┃ │
┃                         ↑         ┃ H
┃                     child2.top    ┃ │
┃                         ↓         ┃ │
┃                 ┌────────────────┐┃ │
┃←─ child2.left ─→│     child2     │┃ │
┃                 └────────────────┘┃ ↓
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛┅┅┅
┇←─────────────   W  ──────────────→┇

其中

  • H 为 container 的 height 设置为 "auto" 时自动计算出的高度
  • W 为 container 的 width 设置为 "auto" 时自动计算出的宽度

伪代码

H = container.children.filter(isStatic).map(x => x.height + x.top).reduce(sum);
W = container.children.filter(isStatic).map(x => x.width + x.left).reduce(max);

水平排列

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓┅┅┅
┃  container        ↑                             ↑        ┃ ↑
┃                   │                        child2.top    ┃ │
┃               child1.top                        ↓        ┃ │
┃                   │                       ┌────────────┐ ┃ H
┃                   ↓                       │   child2   │ ┃ │
┃               ┌────────┐ ←─ child2.left ─→└────────────┘ ┃ │
┃← child1.left →│ child1 │                                 ┃ │
┃               └────────┘                                 ┃ ↓
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛┅┅┅
┇←─────────────────────────   W  ─────────────────────────→┇

其中

  • H 为 container 的 height 设置为 "auto" 时自动计算出的高度
  • W 为 container 的 width 设置为 "auto" 时自动计算出的宽度

伪代码

H = container.children.filter(isStatic).map(x => x.height + x.top).reduce(max);
W = container.children.filter(isStatic).map(x => x.width + x.left).reduce(sum);

绝对定位

当把 container 中的子元素设置为 position: "absolute" 时：

  • 不论子元素之前有多少元素，也不论 container 的 direction 为 "horizontal" 或 "vertical" 都是相对于父 container 进行定位。 与 HTML 中不同的是，此时不需要将 container 设置为 position: "relative"，也不支持此选项。
  • 绝对定位的元素尺寸不会影响兄弟元素的定位，也不会受到它们的影响。
  • 绝对定位的元素尺寸不会影响 container 元素的尺寸。

mp-painter 中会按照元素在 children 中的顺序绘制，后出现的元素会覆盖先出现的元素。

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓┅┅┅
┃  container        ↑                        ┃ ↑
┃                   │                        ┃ │
┃               childN.top                   ┃ │
┃                   │                        ┃ │
┃                   ↓                        ┃ H
┃               ┌────────┐                   ┃ │
┃← childN.left →│ childN │                   ┃ │
┃               └────────┘                   ┃ │
┃                                            ┃ ↓
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛┅┅┅
┇←──────────────────   W  ──────────────────→┇

Clone this wiki locally