容器类布局组件，顾名思义，就是能够容纳若干子组件，并且能够排列子组件位置布局的容器。布局指用特定的组件或者属性来管理用户页面所放置UI组件的大小和位置。

一、什么是盒子模型？

特别提示：在前端的各种UI布局中都使用到了类似于CSS中的盒子模型和DOM树的概念，无论是Android、还是web网页，只是叫法不同，比如android中控件树，其实都是同一个概念。同样，ArkUI中也使用到这个概念。所以，在此先了解下什么是盒子模型？

CSS中的盒子模型是用来描述网页中元素布局和定位的基本概念之一。每个HTML元素可以被看作一个矩形的盒子，这个盒子由内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分组成。这些部分构成了盒子模型的基本结构，它们的大小和位置决定了元素在页面中的呈现方式。

• 内容(Content): 盒子中用来显示实际内容的部分，如文本、图像等。
• 内边距(Padding): 内边距是内容与边框之间的距离，它可以用来控制元素内部内容与边框之间的间距。
• 边框(Border): 边框是围绕内容和内边距的线条，它可以用来装饰元素或者为元素提供外观上的边界。
• 外边距(Margin): 外边距是盒子与相邻元素之间的距离，它可以用来控制元素与其他元素之间的间距。
• 宽度(width)：元素要呈现的内容的宽度。
• 高度(height)：元素要呈现的内容的高度。

CSS通过盒子模型来确定元素的尺寸和位置，开发者可以通过设置元素的内容、内边距、边框和外边距来调整元素在页面中的布局。

注意：上图盒子模型中，每个组成部分都可以看成一个盒子，如content盒子、padding盒子、margin盒子、border盒子。

DOM（Document Object Model）树是HTML文档的抽象表示，它将HTML文档中的每个元素都表示为一个对象，这些对象构成了一个层次结构的树形结构。每个元素对象都有对应的属性（如内容、样式等）和方法（如添加、删除子元素等）。CSS中的盒子模型与DOM tree的关系在于，CSS样式规则可以通过选择器选中特定的DOM元素，并为其应用样式，包括盒子模型中的尺寸、边框、内外边距等属性。换句话说，CSS中的盒子模型描述了元素的视觉表示，而DOM树描述了文档的结构，二者共同决定了最终页面的呈现方式。DOM树中的节点就是一个盒子模型。

1.1 布局结构

先来看一张来自官方的图，这张图很好的展示了一个页面的结构，这就是组件树：

布局的结构通常是分层级的，代表了用户界面中的整体架构。其中，Page表示页面的根节点，Column/Row等元素为系统组件。针对不同的页面结构，ArkUI提供了不同的布局组件来帮助开发者实现对应布局的效果，例如Row用于实现线性布局。

1.2 布局元素的组成

上图也是一张来自官方的图，这张图与文章开头的盒子模型图大同小异。

• 组件区域（蓝区方块）：组件区域表明组件的大小，width、height属性设置该区域的大小。
• 组件内容区（黄色方块）：组件区域大小减去组件的border值，组件内容区大小会作为组件内容（或者子组件）进行大小测算时的布局测算限制。
• 组件内容（绿色方块）：组件内容本身占用的大小，比如文本内容占用的大小。组件内容和组件内容区不一定匹配，比如设置了固定的width和height，此时组件内容的大小就是设置的width和height减去padding和border值，但文本内容则是通过文本布局引擎测算后得到的大小，可能出现文本真实大小小于设置的组件内容区大小。当组件内容和组件内容区大小不一致时，align属性生效，定义组件内容在组件内容区的对齐方式，如居中对齐。
• 组件布局边界（虚线部分）：组件通过margin属性设置外边距时，组件布局边界就是组件区域加上margin的大小。

  二、基本概念

• 布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
• 布局子元素：布局容器内部的元素。
• 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。
• 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。
• 间距：布局子元素的间距。