div
基础容器,用作页面结构的根节点或将内容进行分组。
权限列表
无
子组件
支持。
属性
支持通用属性。
样式
除支持组件通用样式外,还支持如下样式:
事件
除支持通用事件外,还支持如下事件:
方法
除支持通用方法外,还支持如下方法:
表 1 ScrollOffset6+
表 2 ScrollParam6+
示例
-
Flex样式
<!-- xxx.hml --> <div class="container"> <div class="flex-box"> <div class="flex-item color-primary"></div> <div class="flex-item color-warning"></div> <div class="flex-item color-success"></div> </div> </div>
/* xxx.css */ .container { flex-direction: column; justify-content: center; align-items: center; width: 454px; height: 454px; } .flex-box { justify-content: space-around; align-items: center; width: 400px; height: 140px; background-color: #ffffff; } .flex-item { width: 120px; height: 120px; border-radius: 16px; } .color-primary { background-color: #007dff; } .color-warning { background-color: #ff7500; } .color-success { background-color: #41ba41; }
-
Flex Wrap样式
<!-- xxx.hml --> <div class="container"> <div class="flex-box"> <div class="flex-item color-primary"></div> <div class="flex-item color-warning"></div> <div class="flex-item color-success"></div> </div> </div>
/* xxx.css */ .container { flex-direction: column; justify-content: center; align-items: center; width: 454px; height: 454px; } .flex-box { justify-content: space-around; align-items: center; flex-wrap: wrap; width: 300px; height: 250px; background-color: #ffffff; } .flex-item { width: 120px; height: 120px; border-radius: 16px; } .color-primary { background-color: #007dff; } .color-warning { background-color: #ff7500; } .color-success { background-color: #41ba41; }
-
Grid样式
<!-- xxx.hml --> <div class="common grid-parent"> <div class="grid-child grid-left-top"></div> <div class="grid-child grid-left-bottom"></div> <div class="grid-child grid-right-top"></div> <div class="grid-child grid-right-bottom"></div> </div>
/* xxx.css */ .common { width: 400px; height: 400px; background-color: #ffffff; align-items: center; justify-content: center; margin: 24px; } .grid-parent { display: grid; grid-template-columns: 35% 35%; grid-columns-gap: 24px; grid-rows-gap: 24px; grid-template-rows: 35% 35%; } .grid-child { width: 100%; height: 100%; border-radius: 8px; } .grid-left-top { grid-row-start: 0; grid-column-start: 0; grid-row-end: 0; grid-column-end: 0; background-color: #3f56ea; } .grid-left-bottom { grid-row-start: 1; grid-column-start: 0; grid-row-end: 1; grid-column-end: 0; background-color: #00aaee; } .grid-right-top { grid-row-start: 0; grid-column-start: 1; grid-row-end: 0; grid-column-end: 1; background-color: #00bfc9; } .grid-right-bottom { grid-row-start: 1; grid-column-start: 1; grid-row-end: 1; grid-column-end: 1; background-color: #47cc47; }