鸿蒙边框组件

今天我们学习ArkTS边框的使用

border（边框）我们回想一下学习HTML的时候边框是如何设置的

<style>
div{
    border:1px solid red //这是给底下div添加了1像素的红色实线的边框
    //我们分别了解一下border都有什么属性
    border-color:red //边框颜色
    border-width:10px //边框的宽度
    border-style:solid //边框的样式
    //边框的样式有：实线，双实线，虚线等等
    border-radius:10px //设置边框的圆角
}
</style>


<div>这是一个盒子</div>

以上是我们学习HTML，css学习的边框。那我们接下来看看ArkTS是如何使用的

我们对比一下是不是没有太大的区别，只有写法上的改变。

ArkTS的对齐方式也跟移动端学习的对齐方式也大差不差

我们也一起回顾一下

display:flex//弹性盒子
/*
1.center:居中  
2.space-between:第一个子元素放在开始端，最后一个在最末端，其他平分剩余空间。
3.space-around:第一个和最后一个子元素剩余空间是其他一半，其他平分剩余空间。
4.flex-start:从行首起始位置开始排列
5.flex-end：从行尾位置开始排列
*/
justify-content: space-between;//水平对齐方式

//center:元素位于容器的中心。
align-items: center;//侧轴（纵轴）方向上的对齐方式

我们看一下ArkTs的写法

今天内容比较简单，就了解了一下边框与对齐方式，以及跟之前学习css做了一个对比，ArkTs对于之前有基础的小伙伴来说还是比较友好的，今天的内容就到这里，下次我们再见。