CSS布局小知识点

1.

这是一段CSS样式代码,使用了flex布局,并设置了元素的对齐方式和内容的对齐方式都为居中。具体解释如下:

  • display: flex;:将元素设置为flex容器,使其子元素按照弹性布局排列。
  • align-items: center;:在交叉轴上(通常是垂直方向)将子元素对齐方式设为居中。
  • justify-content: center;:在主轴上(通常是水平方向)将子元素的内容对齐方式设为居中。

居中之前:结合所需在style中设置height:50px

这样设置后,元素的子元素将在垂直和水平方向上都处于居中状态。

2.

  • margin: 0 5px;:表示在垂直方向上不设置边距(顶部和底部边距保持默认值),而在水平方向上的左右边距均为 5 像素。

这样设置后,元素在水平方向上将具有 5 像素的左右边距,垂直方向上的边距保持默认值。

3. 如何在前端页面加入自定义图标

 访问iconfont-阿里巴巴矢量图标库​​​​​​

具体教学视频见  视频6 Vue 管理系统速成    时间 1:46