理解布局#

#概述

布局系统的主要目的是确保 Lessjs 元素可以合理表达其布局，从而使运行时可以在完成任何远程资源（例如：JavaScript 和数据调用）之前推断元素的大小。这一点很重要，因为这样可以显著减少无意义的呈现和滚动操作。

基于这一点，Lessjs 布局系统依赖于一组属性（例如：layout、width 和 height）来表达元素对布局和大小的需求。

#先读结论

• 在 Lessjs 中，组件通常必须提前声明占位尺寸，否则运行时无法稳定推断布局，组件可能不会渲染。
• 最常用的两个布局是 responsive（按宽高比自适应）和 fixed（固定宽高）。
• 当你遇到“组件不显示 / 布局抖动”，优先检查：layout、width、height 的组合是否符合规则。

#最小示例

#responsive：按宽高比自适应（推荐用于图片/视频）

<spz-img
  layout="responsive"
  width="16"
  height="9"
  src="https://img.staticdj.com/5236bc0a95a0196e21bc3b52fcabab3f.jpeg"
  alt="Demo image"
></spz-img>

#fixed：固定宽高（用于需要精确尺寸的场景）

<spz-img
  layout="fixed"
  width="300"
  height="300"
  src="https://img.staticdj.com/5236bc0a95a0196e21bc3b52fcabab3f.jpeg"
  alt="Demo image"
></spz-img>

#行为

非容器 Lessjs 元素（既 layout != container）在未解析/未构建模式下启动。此时，该元素的所有子级均处于隐藏状态。完全构造该元素所需的 JavaScript 和数据负载仍可下载和初始化，但 Lessjs 运行时已经知道如何仅根据 CSS 类和 layout、width、height 属性来确定元素大小和布局。

运行时根据 layout、width 和 height 属性来确定元素大小和显示元素。所有布局规则均通过 CSS 在内部实现。如果元素的大小可以通过 CSS 样式进行推断并且不会随子元素而更改，我们说该元素可“定义大小”，也就是说，该元素立即可供使用或动态插入。但是，这并不意味着该元素的大小无法改变。有些布局完全可以自适应，就像 responsive、fixed-height、intrinsic、fill 和 flex-item 布局一样。简单来说，就是在呈现或滚动期间或者在下载后，如果用户没有给出明确的操作，元素大小不会更改。

如果元素的布局配置错误，则不会对元素进行任何呈现。可能出现的错误包括：layout、width 和 height 属性的值无效或者不受支持。

#布局属性

根据 layout 属性的值，Lessjs 组件元素可能会必须要求具有 width 或 height 属性，着两个属性包含整型像素值。布局的实际行为取决于 layout 属性。

#layout

Lessjs 提供了一组布局，用于指定 Lessjs 组件在文档布局中的行为。您可以添加 layout 属性并为其指定下表中列出的其中一个值，从而为组件元素指定布局。

#container

元素允许其子级定义大小，这与常规的 HTML div 非常像。假定组件自身没有特定的布局，而仅仅充当容器，子级会被立即呈现。

#responsive

需要指定宽度和高度。元素占用可供自身使用的空间，并根据 width 和 height 属性给出的宽高比自动重新调整其高度。此布局非常适合大部分 Lessjs 元素，包括 spz-img、spz-video 等。可用空间取决于父元素，也可以使用 max-width CSS 进行自定义。

#fixed

需要指定宽度和高度。元素具有固定宽度和高度，不支持自适应。

#fixed-height

需要指定高度。元素占用可供自身使用的空间，但保持高度不变。此布局特别适合 spz-carousel 等元素，这些元素包含水平放置的内容。

#fill

元素占用可供自身使用的空间，即宽度和高度。换句话说，fill 元素的布局和大小与其父项一致。对于要填充父容器的元素，可指定 fill 布局，并确保父容器指定 position:relative; 或 position:absolute。

#flex-item

如果父项为弹性容器（即 display: flex），则元素与其父项中布局类型为 flex-item 的其他元素占用父容器的剩余空间。

#intrinsic

需要指定宽度和高度。元素占用可供自身使用的空间，并根据 width 和 height 属性给出的宽高比自动重新调整其高度，直到该元素达到传递给 spz-img 的 width 和 height 属性所定义的元素大小，或者达到 CSS 约束（例如：max-width）。

#nodisplay

元素不显示，不占用屏幕上的空间，就像其显示样式设为 none 一样。假定元素自身可以在用户操作时显示，例如：spz-lightbox，spz-sidebar等。

#logic

元素的行为取决于用户设定，默认组件不会给它赋予任何样式。通常用在不需要占用任何空间的元素，例如：spz-event、spz-observer 等。

#AI 使用建议（LLM Ready）

• 章节密度：检测到 4 个二级标题。
• 示例密度：检测到 0 个代码块。
• 先读结论：优先提取本页“定义、约束、边界条件”。
• 再读证据：根据代码示例确认可执行写法，不直接依赖自然语言段落。
• 最后联动：涉及组件时同步查看对应组件页，避免文档与实现偏差。