旅游管理App开发 第四天:技术点汇总以及遇到问题的解决办法

1.【Vue报错】关于 The template root requires exactly one element 报错的解决方案

在这里插入图片描述

报错原因:

Vue只允许模板里存在一个根节点

解决方案:

<template> 中添加一个 <div>标签,之后所有的组件全部加在 <div>即可解决


2.expected “indent”, got “outdent” 错误

可能的报错原因:

  1. 可能是自己在写stylus代码时,tab和空格混用
  2. 自己的代码并没有写完,存在一些残缺代码
  3. 代码本身存在问题

解决方案:

  1. 我们在报错之后对代码进行格式化,转化为空格缩进 或者 转化为tab进行缩进;
  2. 补全代码;
  3. 检查代码语义的正确性,可能是逻辑的错误,也可能是单词拼写错误。

3. &:before和&:after 含义

:before是伪类,每个元素都可以有伪类 :before和:after
&:before和&:after这是scss的写法,对应的css写法是 .class:bofore


4. CSS 中的 justify-content

一.相关知识准备:

  • 通过display:flex可以将元素设置为弹性布局容器元素。
  • 容器元素具有两个轴线,默认状态下,水平的是主轴垂直的是交叉轴
  • 如果项目的尺寸小于容器的尺寸,那么在主轴方向就会有剩余空间。

二. justify-content属性:

  • 此属性应用于容器元素,这一点特别重要。
  • 它用于规定容器元素中的项目如何去分配主轴方向项目之间与以及周围的空间。
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

属性值解析

(1).flex-start:默认值,规定项目位于容器主轴的起始位置。
(2).flex-end:规定项目位于容器主轴的结束位置。
(3).center:规定项目位于容器主轴的中间。
(4).space-between:规定项目在主轴的两端对齐。
(5).space-around:规定容器中项目两侧都保留相等的空间。
(6).initial:F项目默认方式显示,可以参阅CSS initial 属性一章节。
(7).inherit:从父元素继承该属性。

特别说明:此属性必须应用于弹性布局容器元素,否则设置此属性无效。

猜你喜欢

转载自blog.csdn.net/haduwi/article/details/105765105
今日推荐