本文档为魔笔平台中的组件高度设置指南，介绍了固定高度、自动高度和自定义高度三种类型的设置方法、其对页面布局的影响、以及默认自动高度组件的特性。通过本指南，用户可以更好地掌控组件高度设置，灵活地实现页面布局的调整与优化。
概述
在页面布局和设计过程中，不同组件的高度控制着页面的整体结构和视觉呈现。魔笔平台提供了三种组件高度设置类型，即固定高度、自动高度和自定义高度，以满足不同的设计需求和场景。
高度类型
固定高度：组件高度是固定的，只占用指定的网格高度。适用于内容不变或需要严格控制高度的场景，例如固定大小的图片或容器。
自动高度：高度根据内容自适应，比如换行的文本组件。其高度不定，设置高度为自动后会根据内容多少动态变化。适用于文本内容等需要根据内容多少动态调整高度的场景。
自定义高度：用户可以通过 CSS 定义，如
50vh。这种高度也是不定的，会根据定义的 CSS 动态调整。适用场景：适用于视口高度的布局排列。例如，对折线图组件设置高度为
calc(var(--mobi-100vh) - 120px)，表示“浏览器高度 - 120px”，以实现自定义报表形式的全屏幕效果。--mobi-100vh是一个 CSS 变量，约等于视口高度100vh，在页面有横向滚动条时会减去滚动条高度；calc是 CSS 属性计算函数。
设置方法
固定高度设置：通过拖拽调整组件的大小，固定高度与网格数绑定。
自动高度设置：组件高度会根据内容动态调整，无需手动输入高度值。
自定义高度设置：在自定义 CSS 输入框中输入高度定义（例如 calc(100% - 120px)）。
高度调整对布局的影响
对于“自动”和“自定义”两类组件，当其高度发生变化时，如果覆盖了下方排列的组件，下方排列的组件会自动向下移动，以适应新的高度变化。这种动态调整的机制有助于保持页面布局的稳定性和协调性，避免布局重叠或出现空白区域。
默认的自动高度
部分组件默认设置为自动高度，并且无法更改为其他类型高度（如输入框）。选中这类组件，右侧属性面板中不会显示高度切换的选项，组件高度将根据内容或特定的默认样式动态调整。
总结
组件高度设置是页面布局和设计中的重要环节，在魔笔平台中，用户可以根据具体需求选择固定高度、自动高度或自定义高度，从而实现灵活的布局和精美的设计。