2024-08-06

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 */

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

2024-08-06

以下是一个简单的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:stepsactiveStepsteps 是一个包含步骤描述的数组,activeStep 是当前激活步骤的索引。组件使用计算属性 isLastStep 来判断是否是最后一个步骤,从而显示不同的图标。CSS样式定义了步骤条的外观和感觉。

2024-08-06

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

  1. 浮动布局(Float)



.float-layout {
  float: left; /* 或者 right */
  width: 50%;
}
  1. 标准文档流(Normal Flow)



.normal-flow-layout {
  width: 50%;
}
  1. 绝对定位布局(Absolute Positioning)



.absolute-layout {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 300px;
}
  1. 相对定位布局(Relative Positioning)



.relative-layout {
  position: relative;
  left: 10px;
  top: 10px;
  width: 50%;
}
  1. 表格布局(Table)



.table-layout {
  display: table;
  width: 100%;
}
.table-cell {
  display: table-cell;
  width: 50%;
}
  1. Flexbox布局



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



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

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

2024-08-06



/* 设置元素的绝对定位,并指定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

2024-08-06

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

  1. 安装依赖:

    确保你已经安装了node-sasssass-loader以及webpack




npm install --save-dev sass-loader node-sass webpack
  1. 在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>
  1. 配置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了。

2024-08-06

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

  1. 使用 max-widthmax-height 属性:



img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
}
  1. 使用 object-fit 属性:



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



div {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}
  1. 使用 padding-toppadding-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%;
}

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

2024-08-06

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

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

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




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

然后在 HTML 中使用这个类:




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

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

2024-08-06

在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中关于字体样式的基础知识。

2024-08-06

在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属性是非标准属性,但在大多数现代浏览器中得到支持。

2024-08-06

在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来动态地设置宽度或高度,以确保文本可以正确地被截断。