标签 css 下的文章

2024-08-24

CSS定位有五种方式：

静态定位（Static Positioning）
相对定位（Relative Positioning）
绝对定位（Absolute Positioning）
固定定位（Fixed Positioning）
粘性定位（Sticky Positioning）

解释和例子：

静态定位（Static Positioning）：
这是所有元素的默认定位方式，不需要特别指定。




div {
  position: static;
}

相对定位（Relative Positioning）：
元素相对于其正常位置进行定位。




div {
  position: relative;
  top: 20px;
  left: 40px;
}

绝对定位（Absolute Positioning）：
元素相对于最近的非静态定位的父元素进行定位。




div {
  position: absolute;
  top: 20px;
  right: 15px;
}

固定定位（Fixed Positioning）：
元素相对于浏览器窗口进行定位，无论滚动条如何滚动都会固定在屏幕的指定位置。




div {
  position: fixed;
  bottom: 10px;
  left: 5px;
}

粘性定位（Sticky Positioning）：
元素在达到一定阈值之前为相对定位，之后为固定定位。




div {
  position: sticky;
  top: 10px;
}

- 阅读更多 -

css-页面布局-定位大解析-每文一言(世界上,没有人可以支持你一辈子)

System

2024-08-24

所有,css

在CSS中，定位可以通过多种方式来实现，例如使用position属性，它有static、relative、absolute、fixed和sticky等值。sticky是一种相对较新的定位方式，它结合了relative和fixed的特性，适合实现“粘性定位”。

在实际应用中，我们可以利用定位来精确控制元素在页面中的位置。然而，定位也可能导致布局混乱，因此需要仔细地计划和排列元素，以确保页面的可访问性和可维护性。

每文一言：世界上，没有人可以支持你一辈子。你必须自己支持自己，你必须自己找到出路。

- 阅读更多 -

CSS 滚动条样式修改

System

2024-08-24

所有,css

在CSS中，可以使用::-webkit-scrollbar和相关伪元素来修改滚动条的样式，但仅限于基于WebKit的浏览器（如Chrome和Safari）。以下是一个简单的例子，展示如何自定义滚动条的外观：




/* 自定义整个滚动条 */
::-webkit-scrollbar {
  width: 12px; /* 设置滚动条的宽度 */
  background-color: #f9f9f9; /* 滚动条的背景色 */
}
 
/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
  background: #e1e1e1; /* 轨道的背景色 */
  border-radius: 10px; /* 轨道的圆角 */
}
 
/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1; /* 滑块的背景色 */
  border-radius: 10px; /* 滑块的圆角 */
  border: 2px solid #ffffff; /* 滑块边框 */
}
 
/* 滑块hover效果 */
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8; /* 滑块hover时的背景色 */
}

将上述代码添加到你的CSS文件中，并确保你的网页在支持WebKit的浏览器中查看，即可看到自定义的滚动条样式。

需要注意的是，这些伪元素并不是所有浏览器都支持，例如Firefox不支持::-webkit-scrollbar。对于跨浏览器兼容性，可以考虑使用第三方库，如perfect-scrollbar或者使用CSS的标准属性（如scrollbar-color和scrollbar-width），但这些属性支持程度也不相同，可以根据实际需求和浏览器兼容性选择合适的方案。

- 阅读更多 -

css Animation 动画-右进左出

System

2024-08-24

所有,css

CSS 动画可以通过关键帧（@keyframes）来定义。为了实现一个右进左出的动画效果，我们可以定义两个关键帧：进场和离场。

以下是一个简单的例子：




/* 定义进场动画 */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
 
/* 定义离场动画 */
@keyframes slideOutToRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
 
/* 应用动画 */
.element {
  animation: slideInFromRight 1s ease forwards;
}
 
/* 离场时应用动画 */
.element-leave {
  animation: slideOutToRight 1s ease forwards;
}

在 HTML 中，你可以这样使用：




<div class="element">我从右边进来</div>
<!-- 某个时刻触发离场 -->
<div class="element-leave">我会从右边走</div>

当 .element 进入页面时，它会执行 slideInFromRight 动画，从右侧的100%位置开始，到0%位置结束，并逐渐变为完全可见。

当 .element-leave 类被添加时，元素会执行 slideOutToRight 动画，从当前位置开始，移动到右侧100%的位置，并逐渐变为不可见，完成离场动画。

animation 属性的值包括动画名称（slideInFromRight 和 slideOutToRight）、持续时间、缓动函数、填充模式（forwards 保证动画完成后元素保持在结束状态）。

- 阅读更多 -

CSS 2D转换动画 3D转换

System

2024-08-24

所有,css

在CSS中，我们可以使用2D转换、动画和3D转换来创建引人入胜的视觉效果。以下是一些示例代码：

2D转换动画：




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s infinite;
}
 
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

在这个例子中，我们创建了一个名为"move"的关键帧动画，它将一个名为"box"的元素从左侧移动到右侧。

3D转换动画：




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s infinite linear;
}
 
@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

在这个例子中，我们创建了一个名为"rotate"的关键帧动画，它将一个名为"box"的元素绕Y轴旋转。

2D转换与3D转换结合动画：




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  perspective: 500px;
  animation: rotate 2s infinite linear;
}
 
@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

在这个例子中，我们创建了一个名为"rotate"的关键帧动画，它将一个名为"box"的元素绕X轴和Y轴旋转。

以上代码仅展示了2D转换、3D转换和动画的简单应用，CSS还有许多其他的特性和用法，可以创建出更加复杂和引人入胜的动画效果。

- 阅读更多 -

html + css 布局技巧总结 ——多列布局

System

2024-08-24

所有,css

在HTML和CSS中实现多列布局的一种常见方法是使用CSS Flexbox。以下是一个简单的例子，展示如何使用Flexbox创建一个具有三个列的布局：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout Example</title>
<style>
  .container {
    display: flex; /* 使用Flexbox布局 */
  }
  .column {
    flex: 1; /* 每个列平分空间 */
    padding: 10px; /* 列的内边距 */
  }
</style>
</head>
<body>
<div class="container">
  <div class="column">
    <p>Column 1</p>
    <!-- 内容 -->
  </div>
  <div class="column">
    <p>Column 2</p>
    <!-- 内容 -->
  </div>
  <div class="column">
    <p>Column 3</p>
    <!-- 内容 -->
  </div>
</div>
</body>
</html>

在这个例子中，.container 类使用 display: flex 属性来指定Flexbox布局。.column 类使用 flex: 1 来确保所有列平等地分配容器的空间。这种方法提供了一个灵活的多列布局，适用于各种屏幕尺寸和设备。

- 阅读更多 -

推荐开源项目：Open Props —— 开源的 CSS 变量库

System

2024-08-24

所有,css

Open Props 是一个开源的 CSS 变量库，旨在简化样式管理和主题切换。通过预定义的样式变量和插件，Open Props 提供了一种方法来创建响应式和可访问的网站。

以下是如何使用 Open Props 的一个基本示例：

首先，在项目中安装 Open Props：




npm install open-props

然后，在你的 CSS 文件中引入 Open Props：




@import 'open-props/dist/open-props.min.css';
 
/* 使用 Open Props 的变量 */
body {
  background-color: var(--open-props-color-background);
  color: var(--open-props-color-text);
  font-family: var(--open-props-font-family-sans-serif);
}

接下来，你可以使用 Open Props 提供的变量来设置你的样式，从而简化样式的定义和维护。

Open Props 还提供了一个插件系统，允许开发者创建自定义的样式变量和功能，进一步提高样式管理的灵活性。




// 引入 Open Props 插件系统
import { openPropsPlugin } from 'open-props';
 
// 使用插件系统定义新的变量
const customPlugin = {
  variables: {
    '--my-custom-color': 'blue',
  },
};
 
// 应用插件
openPropsPlugin(customPlugin);

使用 Open Props 可以帮助你更好地组织和维护你的样式代码，使得样式的定制和扩展变得更加容易。

- 阅读更多 -

【CSS】认识CSS选择器及各选择器对应的用法

System

2024-08-24

所有,css

CSS选择器是用来选择你想要样式化的HTML元素的模式。下面是一些常用的CSS选择器以及它们的用法：

元素选择器（Element Selector）: 选择特定的元素。




p {
  color: blue;
}

类选择器（Class Selector）: 选择具有特定类的元素。




.my-class {
  background-color: yellow;
}

ID选择器（ID Selector）: 选择具有特定ID的元素。




#my-id {
  font-size: 20px;
}

属性选择器（Attribute Selector）: 选择包含特定属性的元素。




input[type="text"] {
  border: 1px solid black;
}

伪类选择器（Pseudo-class Selector）: 选择特定状态的元素。




a:hover {
  text-decoration: underline;
}

伪元素选择器（Pseudo-element Selector）: 选择特定位置的内容。




p::first-letter {
  font-size: 200%;
}

子代选择器（Child Selector）: 选择特定父元素的子元素。




div > p {
  color: red;
}

相邻选择器（Adjacent Sibling Selector）: 选择紧接在另一个元素后的元素。




h1 + p {
  margin-top: 0;
}

后代选择器（Descendant Selector）: 选择特定父元素的后代元素。




div p {
  color: green;
}

通配选择器（Universal Selector）: 选择所有元素。




* {
  margin: 0;
  padding: 0;
}

组选择器（Grouping Selector）: 将选择器组合在一起。




h1, h2, h3 {
  font-family: Arial, sans-serif;
}

这些是CSS中的基本选择器。更复杂的选择器可以通过组合这些基本构造块创建。

- 阅读更多 -

uni-app引用子组件中后穿透三方组件css失效

System

2024-08-24

所有,css

uni-app 中引用子组件时遇到三方组件CSS样式不生效的问题通常是因为其作用域隔离造成的。uni-app 使用了 Vue 的组件化机制，并且为了兼容不同端，默认会给组件添加一个data-v-hash的属性，以及相应的作用域隔离样式。

解决方法：

使用深度选择器（deep selector）：在子组件的style标签中，使用/deep/（对于Vue2）或>>>（对于Vue3）来穿透组件边界，应用三方组件的样式。




<style scoped>
/deep/ .third-party-class {
  /* 三方组件的样式 */
}
</style>

或者在Vue3中：




<style scoped>
>>> .third-party-class {
  /* 三方组件的样式 */
}
</style>

使用全局样式：将三方组件的样式提取出来，放在App.vue或者全局样式文件中，这样可以确保不受当前组件的作用域隔离影响。




<style>
.third-party-class {
  /* 三方组件的样式 */
}
</style>

避免使用scoped属性：如果不希望使用深度选择器，可以移除<style>标签中的scoped属性，但这会影响整个应用中所有组件的样式作用域，确保不会与其他组件样式发生冲突。




<style>
.third-party-class {
  /* 三方组件的样式 */
}
</style>

注意：在实际开发中，应该谨慎使用全局样式或移除scoped属性，因为它们可能会影响应用的性能和样式管理。通常推荐使用/deep/或>>>来保持组件的样式封装性，避免潜在的样式污染问题。

- 阅读更多 -

拉伸图片覆盖整个页面的css写法

System

2024-08-24

所有,css

要使图片完全覆盖整个页面，可以使用CSS的background-size属性，并将其设置为cover。同时，确保图片设置为背景图片，而不是作为<img>标签的一部分。以下是实现这一效果的CSS代码示例：




html, body {
  height: 100%;
  margin: 0;
}
 
body {
  background-image: url('path/to/your/image.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

这段代码将确保背景图片始终覆盖整个页面，同时保持图片的宽高比，并且图片会根据页面尺寸进行相应的缩放。background-position属性确保图片从页面的中心开始覆盖，background-attachment: fixed; 确保背景图片固定，不会随着内容滚动。

- 阅读更多 -