HarmonyOS应用开发培训三

一、div的使用

基础容器，用作页面结构的根节点或将内容进行分组。

1、通用常规属性

名称	类型	默认值	必填	描述
id	string	-	否	组件的唯一标识。
style	string	-	否	组件的样式声明。
class	string	-	否	组件的样式类，用于引用样式表。
ref	string	-	否	用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。
disabled	boolean	false	否	当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。
focusable	boolean	false	否	当前组件是否可以获取焦点。 当focusable设置为true时，组件可以响应焦点事件和按键事件。当组件额外设置了按键事件或者点击事件时，框架会设置该属性为true。
data	string	-	否	给当前组件设置data属性，进行相应的数据存储和读取。JS文件中： 在事件回调中使用 e.target.attr.data 读取数据，e为事件回调函数入参。 使用$element或者$refs获取DOM元素后，通过attr.data 进行访问。

2、通用常规样式

名称	类型	默认值	描述
width	<length> | <percentage>	-	设置组件自身的宽度。 缺省时使用元素自身内容需要的宽度。
height	<length> | <percentage>	-	设置组件自身的高度。 缺省时使用元素自身内容需要的高度。
padding	<length> | <percentage>5+	0	使用简写属性设置所有的内边距属性。 该属性可以有1到4个值： 指定一个值时，该值指定四个边的内边距。 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。
margin	<length> | <percentage>5+	0	使用简写属性设置所有的外边距属性，该属性可以有1到4个值。 只有一个值时，这个值会被指定给全部的四个边。 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。
border	-	0	使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。
border-style	string	solid	使用简写属性设置所有边框的样式，可选值为： dotted：显示为一系列圆点，圆点半径为border-width的一半。 dashed：显示为一系列短的方形虚线。 solid：显示为一条实线。
border-width	<length>	0	使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。
border-color	<color>	black	使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。
border-radius	<length>	-	border-radius属性设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。 说明：顺序为左下、右下、左上和右上。
background	<linear-gradient>	-	仅支持设置渐变样式，与background-color、background-image不兼容。
background-color	<color>	-	设置背景颜色。
background-image	string	-	设置背景图片。与background-color、background不兼容，支持网络图片资源和本地图片资源地址。 示例： background-image: url("/common/background.png") 说明：不支持svg格式图片。