CSS样式的优先级基于几个主要因素：

1. 直接样式：直接在元素上的样式（内联样式）。
2. ID选择器：每个ID只能使用一次，高优先级。
3. 类、属性和伪类选择器：按照选择器的数量和质量。
4. 元素和伪元素选择器：按数量。
5. 通配选择器（*）：最低优先级。

优先级规则：内联样式 > ID选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器 > 通配选择器

提升优先级的方法：

1. 提升特指度：使用更具体的选择器。
2. !important：在声明的末尾添加，会覆盖所有其他同权重的规则，但不推荐使用，因为它破坏了样式表的管理性。

样式层叠：当多个样式规则应用于同一元素且优先级相同时，会发生样式层叠。

1. 文字和背景的层叠遵循"正常流"和"文字流"的规则。
2. 对于其他属性，如果存在冲突，则遵循"后来者优先"的原则。

使用数值计算优先级：

• 将所有应用到元素的选择器的权重值相加。
• 按照选择器的复杂度进行计算：ID > 类 > 标签。
• 如果权重值相同，则遵循层叠规则。

示例代码：

/* 直接样式 */
#myId { color: red; } /* 权重：100 */
 
/* 类和属性选择器 */
div[data-custom="value"] .myClass { color: blue; } /* 权重：10 + 1 = 11 */
 
/* 元素和伪元素选择器 */
p:before { color: green; } /* 权重：1 */
 
/* 通配选择器 */
* { color: black; } /* 权重：0 */

在这个例子中，即使div[data-custom="value"] .myClass的选择器更具体，也无法超过#myId的ID选择器。然而，如果#myId被移除或者没有应用到该元素上，div[data-custom="value"] .myClass将会因为更多的类和属性选择器而获得应用。

如果需要提升优先级，可以使用更多的ID选择器或者将类和属性选择器组合使用，例如：

#myId .myClass[data-custom="value"] { color: purple; } /* 权重：100 + 1 = 101 */

这样就提升了优先级，即使其他规则中包含了元素或伪元素选择器。

以下是一个简单的uniapp+vue+css手写步骤条组件的示例代码：

<template>
  <view class="step-container">
    <view
      class="step"
      v-for="(item, index) in steps"
      :key="index"
      :class="{'active': index === activeStep}"
    >
      <view class="step-number">
        <text v-if="index < activeStep || (index === activeStep && !isLastStep)">✓</text>
        <text v-else>{{ index + 1 }}</text>
      </view>
      <view class="step-text">{{ item }}</view>
    </view>
  </view>
</template>
 
<script>
export default {
  props: {
    steps: {
      type: Array,
      default: () => ['步骤1', '步骤2', '步骤3']
    },
    activeStep: {
      type: Number,
      default: 0
    }
  },
  computed: {
    isLastStep() {
      return this.activeStep === this.steps.length - 1;
    }
  }
};
</script>
 
<style scoped>
.step-container {
  display: flex;
  align-items: center;
}
 
.step {
  display: flex;
  align-items: center;
  font-size: 14px;
  position: relative;
  padding: 10px 20px;
  color: #757575;
}
 
.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e0e0e0;
  margin-right: 10px;
}
 
.step-text {
  white-space: nowrap;
}
 
.active {
  color: #005f69;
}
 
.active .step-number {
  background-color: #005f69;
  color: #fff;
}
 
.active .step-number text {
  font-size: 20px;
}
</style>

这个组件接收两个props：steps 和 activeStep。steps 是一个包含步骤描述的数组，activeStep 是当前激活步骤的索引。组件使用计算属性 isLastStep 来判断是否是最后一个步骤，从而显示不同的图标。CSS样式定义了步骤条的外观和感觉。

CSS提供了多种方式来进行页面布局，以下是一些常见的布局方式及其示例代码：

1. 浮动布局（Float）

.float-layout {
  float: left; /* 或者 right */
  width: 50%;
}

2. 标准文档流（Normal Flow）

.normal-flow-layout {
  width: 50%;
}

3. 绝对定位布局（Absolute Positioning）

.absolute-layout {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 300px;
}

4. 相对定位布局（Relative Positioning）

.relative-layout {
  position: relative;
  left: 10px;
  top: 10px;
  width: 50%;
}

5. 表格布局（Table）

.table-layout {
  display: table;
  width: 100%;
}
.table-cell {
  display: table-cell;
  width: 50%;
}

6. Flexbox布局

.flex-container {
  display: flex;
}
.flex-item {
  flex: 1; /* 或者指定比例 */
}

7. Grid布局

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
}
.grid-item {
  /* grid item styles */
}

每种布局都有其特点，可以根据具体需求选择合适的布局方式。在实际开发中，Flexbox 和 Grid 布局因其灵活性和完整的布局能力，使用最为广泛。

/* 设置元素的绝对定位，并指定z-index层级 */
.element1 {
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 1; /* 设置较小的z-index值，在底层堆叠 */
}
 
.element2 {
  position: absolute;
  top: 15px;
  left: 25px;
  z-index: 2; /* 设置较大的z-index值，在顶层堆叠 */
}
 
/* 如果有必要，可以设置父容器的z-index来控制堆叠顺序 */
.container {
  position: relative;
  z-index: 0; /* 父容器的z-index默认是0 */
}

这段代码展示了如何使用CSS的position: absolute属性进行绝对定位，并通过z-index属性来控制堆叠顺序。z-index值较大的元素会覆盖z-index值较小的元素。如果父容器也需要进行堆叠顺序控制，可以像.container类一样设置position: relative并指定z-index。

在Vue项目中使用SCSS，首先需要确保你的项目支持SCSS。大多数现代Vue项目模板已经内置了对SCSS的支持。

1. 安装依赖：

   确保你已经安装了node-sass或sass-loader以及webpack。

npm install --save-dev sass-loader node-sass webpack

2. 在Vue组件中使用SCSS：

<template>
  <div class="example">
    <p>This is a paragraph with SCSS styling.</p>
  </div>
</template>
 
<script>
export default {
  name: 'ExampleComponent'
}
</script>
 
<style lang="scss">
.example {
  p {
    color: blue;
    font-size: 16px;
  }
}
</style>

3. 配置Vue CLI项目中的vue.config.js（如果需要）：

如果你的项目是通过Vue CLI创建的，并且你需要对默认配置进行修改，你可以添加或修改vue.config.js文件。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/styles/variables.scss";`
      }
    }
  }
};

这样配置后，你就可以在Vue组件的<style>标签中使用SCSS了。

在CSS中，要实现图片自适应容器，可以使用多种方法，以下是几种常用的方法：

1. 使用 max-width 和 max-height 属性：

img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
}

2. 使用 object-fit 属性：

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁剪并覆盖 */
  /* 或者使用 */
  object-fit: contain; /* 缩放以包含 */
}

3. 使用 background-image 属性：

div {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

4. 使用 padding-top 或 padding-bottom 百分比：

div {
  width: 300px;
  position: relative;
}
 
div::before {
  content: '';
  display: block;
  padding-top: 100%; /* 使得div的padding-top等于其width */
}
 
img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

以上方法可以根据具体需求选择使用。

object-fit 属性用于指定可替换元素（例如 <img> 或 <video>）的内容应该如何适应容器的尺寸。以下是几种常见的 object-fit 值及其作用：

• fill：默认值。拉伸图片以填满容器，可能会改变图片的比例。
• contain：保持图片的原始比例，缩放图片以适合容器内部，完全包含在容器内。
• cover：保持图片的原始比例，缩放图片以覆盖容器，可能会超出容器边界。
• none：不改变图片大小，图片可能会溢出容器。
• scale-down：效果跟 none 或 contain 中较小的那个相同。

如果你想让图片适应标签的大小，你可以在 CSS 中这样写：

.my-image {
  width: 100%; /* 让图片宽度适应容器的宽度 */
  height: auto; /* 高度自动，确保不会失真 */
  object-fit: contain; /* 或者其他你需要的值 */
}

然后在 HTML 中使用这个类：

<img src="path/to/image.jpg" alt="描述" class="my-image">

这样图片就会根据标签的大小和 object-fit 的值来显示了。

在CSS中，我们可以使用font-family属性来定义文本的字体系列。CSS还允许我们为字体指定备用字体，以防首选字体不可用。

解决方案1：

p {
  font-family: "Helvetica", "Arial", sans-serif;
}

在上述代码中，我们首先指定了Helvetica作为段落文本的字体。如果Helvetica字体不可用，则浏览器会尝试使用Arial，如果Arial也不可用，则会使用计算机的默认无衬线字体。

解决方案2：

body {
  font-family: Georgia, "Times New Roman", Times, serif;
}

在这个例子中，我们将Georgia设置为页面主体的默认字体。如果Georgia不可用，浏览器将尝试"Times New Roman"，然后是Times，最后是衬线字体。

解决方案3：

h1 {
  font-family: "Open Sans", Verdana, sans-serif;
}

在这个例子中，我们将Open Sans设置为h1元素的字体。如果Open Sans不可用，浏览器将尝试Verdana，然后是无衬线字体。

解决方案4：

code {
  font-family: "Courier New", Courier, monospace;
}

在这个例子中，我们将Courier New设置为代码元素的字体。如果Courier New不可用，浏览器将尝试Courier，然后是等宽字体。

注意：

1. 当你在font-family属性中列出多个字体时，浏览器会使用第一个识别的字体。
2. 如果字体名称包含空格，则必须用引号括起来。
3. 最后，你应该总是在font-family属性的列表中包含一个通用字体族。

以上就是CSS中关于字体样式的基础知识。

在CSS中，处理文本溢出可以使用以下属性：

1. white-space：控制如何处理元素内的空白。
2. overflow：指定如何处理溢出容器的内容。
3. text-overflow：指定如何显示被截断的文本。

对于单行文本溢出处理：

.single-line-ellipsis {
  white-space: nowrap; /* 保证文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}

对于多行文本溢出处理：

.multi-line-ellipsis {
  overflow: hidden; /* 隐藏溢出的内容 */
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 3; /* 限制在三行内 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}

注意：多行文本溢出处理的-webkit-line-clamp属性是非标准属性，但在大多数现代浏览器中得到支持。

在CSS中，我们可以使用text-overflow属性来实现文本的省略号效果。这通常用于处理长字符串或者长单词，当内容超出其容器的宽度时，可以在末尾显示省略号。

解决方案1：单行文本省略号

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="ellipsis">This is a long text that will be truncated with an ellipsis</div>

在上述代码中，如果文本宽度超出其父元素的宽度，则会在末尾显示省略号。

解决方案2：多行文本省略号

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* number of lines to show */
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="ellipsis-multiline">This is a long text that will be truncated with an ellipsis after three lines</div>

在上述代码中，如果文本的行数超出了设置的值，那么超出的文本将会在末尾显示省略号。注意，这种方法在非webkit内核的浏览器中可能不适用。

解决方案3：使用JavaScript实现省略号

如果你需要更多的灵活性，你可以使用JavaScript来实现省略号。下面是一个简单的例子：

function addEllipsis(element, maxLength, appendToEnd = true) {
  const text = element.textContent;
  if(text.length > maxLength) {
    const trimmedText = text.substr(0, maxLength) + '...';
    element.textContent = appendToEnd ? trimmedText : '...' + trimmedText;
  }
}
 
const myElement = document.getElementById('myElement');
addEllipsis(myElement, 5);

在这个例子中，我们定义了一个函数，它接受一个元素，一个最大长度和一个布尔值，该布尔值决定省略号是添加到开头还是结尾。如果元素的文本长度超过了最大长度，那么就会在开头或结尾添加省略号。

注意：这些解决方案都需要你的元素有固定的宽度或高度，否则文本可能不会被截断。如果你的元素宽度或高度是动态的，你可能需要使用JavaScript来动态地设置宽度或高度，以确保文本可以正确地被截断。