HarmonyOS开发第二天

恩~~~昨天简单了解了一下鸿蒙系统，安装开发工具配置环境。创建了我们自己的第一个鸿蒙项目，虽然只是一个HelloWord哈哈，走着不要停，继续探索学习。

第一步控件上手，先来个控件，比如一个按钮：我们首先需要找到hml。在里面修改结构布局等。

需要一个input标签，输入信息。起一个类选择器class。附上名字。<input class="button"。之后它的控件类型是按钮，需要表明下type是button类型。type=“button”。之后给他复制。value=“我是一个按钮”。这个控件就生成完成了。接下来给它添加个点击事件：οnclick="onClick"就ok了。完整代码：<input class="button" type="button" value="我是一个按钮" οnclick="onClick"/>

啊哈，这不就又像前了一步么，继续。调节控件的具体大小啊颜色啊排列啊这些。就需要在.css里面做具体的修改了。像极了小程序的开发。打开css，首先里面的是container,在里面调节控制，相当于Android的布局。实操之前先来简单学习下属性，不然啥是啥会懵掉。首先是displayCss最常见最基础的属性之一。之前用的时候我很懵，值很多就用的云里雾里的。它的值呢就决定了元素在布局中的具体的表现。其中常见的值有：block、inline、inline-block、flex、inline-flex、grid、inline-grid等。我们可以简单的把display理解为一个大的柜子，而它里面的元素就是一个个独立个体的抽屉。

diaplay: block：基本特性：每个元素都是独立的个体，创建新的元素，就会重新还行。

可以给它设置margin和元素之间的padding值。

diaplay: inline基本特性：会按行顺延排列，当元素大于宽就会自动还行。

inline-block：结合，每个元素在都是个体的基础上，进行行延续，当元素不足够本行时  自动整个元素单位还行

flex布局方式：默认情况下，元素都是按着从左往右排列。而flex布局方式则可以使元素按照一定比例排列。可以让元素根据一定的比例自适应排列。同时可以灵活的控制元素大小和位置等。

grid布局方式：支持类似于表格的布局，把父容器分割成若干个网格。

之后讲完了display  我们需要操控布局元素的位置就需要设置flex的分布属性。

当我们为父布局添加上flex布局方式后，子元素的f'loat，clear和vertical-align属性就会失效。

flex-direction: 设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap: 设置子元素是否换行
align-items:设置侧轴上的子元素的排列方式（单行）
align-content: 设置侧轴上的子元素的排列方式（多行）
flex-flow: 符合属性，相当于同时设置了flex-direction和flex-wrap
 

flex-direction：在布局中以x轴和y轴分布  x轴就是主轴，控制x轴的方向

flex-direction属性决定主轴的方向。主轴和侧轴就看flex-direction设置谁是主轴了。剩下的就是侧轴。而我们的子元素是跟着主轴来排序的

flex-direction: row 默认值子元素从左到右排列

flex-direction: row-reverse 子元素从右到左排列

flex-direction: column 子元素从上到下排列

flex- direction: column-reverse 子元素从右到左排列

又是补基础的一天。散会散会，歇歇太多了消化不了。