ArkUI 学习之尺寸设置：width, height, size, margin, padding
一、概述
arkUI的布局采用的是前端那一套盒子模型，所以先了解一下盒子模型很有必要，不然我们在进行arkUI布局时，会很懵逼！
1. 盒子模型（BoxModel）
在前端的概念里，所有的HTML元素都可以被认为是盒子。CSS盒模型代表网站的设计和布局。 它由外边距(margin)，边框(border)，内边距（填充）(padding)和实际内容组成。
属性以相同的顺序工作：顶部(top)，右侧(right)，底部(bottom)和左侧(left)。
🔊说明：属性工作顺序为顺时针，以上（顶部），右（右侧），下（底部），左（左侧）的顺序。
下图展示了盒模型：
不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。（注意：设置背景色时，外边距不会被渲染）
Border(边框) - 围绕在内边距和内容外的边框。（大小 样式 颜色）
Padding(内边距) - 清除内容周围的区域，内边距是透明的。（注意：设置背景时，内边距会被渲染）
Content(内容) - 盒子的内容，显示文本和图像。
🔊举个例子：如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离。
2. 两种盒子模型（content-box 与 border-box）
内容盒（content-box）和边框盒（border-box）是盒子模型中描述元素尺寸的不同方式。
content-box（内容盒）
默认值，标准盒子模型。width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。
！！！注意：内边距、边框和外边距都在这个盒子的外部。比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。
尺寸计算公式：
width= 内容的宽度height= 内容的高度
宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。
border-box（边框盒）
width 和 height 属性包括内容，内边距和边框，但不包括外边距。
！！！注意：填充和边框将在盒子内 , 例如， .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为 350px 的盒子。内容框不能为负，并且被分配到 0，使得不可能使用 border-box 使元素消失。
尺寸计算公式：
width= border + padding + 内容的宽度height= border + padding + 内容的高度
最后，鸿蒙中使用的就是第二种 border-box 边框盒。
二、鸿蒙中的width, height, size, margin, padding
1. width
width(value: Length)
设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。
🔊：从API version 10开始，该接口支持calc计算特性。
参数：
-
在TextInput组件中，width设置auto表示自适应文本宽度。
-
在AlphabetIndexer组件中，width设置auto表示自适应宽度最大索引项的宽度。
2. height
height(value: Length)
设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。
🔊：从API version 10开始，该接口支持calc计算特性。
参数：
在Row、Column、RelativeContainer组件中，width、height设置auto表示自适应子组件。
3. size
size(value: SizeOptions)
设置高宽尺寸。
从API version 10开始，该接口支持calc计算特性。
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | SizeOptions | 是 |
设置高宽尺寸。 单位：vp |
4. padding
padding(value: Padding | Length | LocalizedPadding)
设置内边距属性。
🔊：从API version 10开始，该接口支持calc计算特性。
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | Padding | Length | LocalizedPadding12+ | 是 |
设置组件的内边距。 参数为Length类型时，四个方向内边距同时生效。 默认值：0 单位：vp padding设置百分比时，上下左右内边距均以父容器的width作为基础值。 |
5. margin
margin(value: Margin | Length | LocalizedMargin)
设置外边距属性。
🔊：从API version 10开始，该接口支持calc计算特性。
参数：
浙公网安备 33010602011771号