理解布局

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

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

非容器 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 属性。

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

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

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

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

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

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

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

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

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

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