分类 css 下的文章

2024-08-19

在HTML和CSS中，我们可以使用各种技术和工具来提升我们的开发效率和代码质量。以下是一些常见的前端开发技术和工具：

版本控制工具：Git是一种分布式版本控制系统，它可以帮助我们跟踪和管理项目中的文件变更历史。
构建工具：Webpack是一个模块打包工具，它可以分析项目中的依赖关系，并生成一个或多个bundle。
包管理工具：npm和yarn是两种流行的包管理工具，它们用于安装和管理项目依赖。
代码质量工具：ESLint、Stylelint和Prettier等工具可以帮助我们写出更加一致和无错误的代码。
状态管理库：Redux和Vuex等库可以帮助我们管理复杂应用的状态。
测试框架：Jest、Mocha和Cypress等测试工具可以帮助我们确保代码的质量。
服务端渲染：Next.js、Nuxt.js等框架可以实现服务端渲染，提高搜索引擎优化和提升应用的加载速度。
图形和图表库：D3.js、Chart.js和Google Charts等可以帮助我们创建图形和图表。
设计系统：如Material Design、Bootstrap等可以帮助我们快速设计和创建高质量的用户界面。
实用库和API：lodash、moment.js等提供了大量实用的函数和对象。

这些技术和工具可以帮助我们更高效地开发和维护前端项目。在选择使用时，我们需要根据项目需求和团队技术栈来选择合适的工具。

2024-08-19




// uniapp vue3 vscode 快速开发配置示例
// 使用 pinia 进行状态管理，数据持久化和加密处理，同时集成 unocss 实现快速样式定义
 
// 1. 安装所需依赖
// 在项目根目录打开终端，运行以下命令
npm install pinia pinia-plugin-persist pinia-plugin-encryption unocss
 
// 2. 配置 `main.js` 或 `main.ts`
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
import piniaPluginEncryption from 'pinia-plugin-encryption'
import App from './App.vue'
 
// 创建 pinia 实例并添加持久化和加密插件
const pinia = createPinia()
pinia.use(piniaPluginPersist)
pinia.use(piniaPluginEncryption)
 
const app = createApp(App)
app.use(pinia)
app.mount('#app')
 
// 3. 在 `store.js` 或 `store/index.js` 中定义 store
import { defineStore } from 'pinia'
 
export const useMainStore = defineStore({
  id: 'main',
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
  },
})
 
// 4. 在组件中使用 store
// 在 `components/MyComponent.vue` 中
<template>
  <button @click="increment">{{ counter }}</button>
</template>
 
<script setup>
import { useMainStore } from '@/store'
 
const { counter, increment } = useMainStore()
</script>
 
// 使用 UnoCSS 快速定义样式
// 在 `components/MyComponent.vue` 中
<style scoped>
/* 使用 UnoCSS 写法 */
.btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
</style>

这个示例展示了如何在uniapp vue3项目中使用pinia进行状态管理，同时使用pinia-plugin-persist进行数据持久化存储和使用pinia-plugin-encryption进行数据加密。同时，展示了如何使用unocss来快速定义组件样式。这些配置可以极大地提升开发者的开发效率和项目质量。

2024-08-19




// 安装 weapp-tailwindcss 和 postcss 相关依赖
npm install weapp-tailwindcss postcss postcss-loader autoprefixer -D
 
// 在项目根目录创建 postcss 配置文件 postcss.config.js
// postcss.config.js
module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-import': {},
    'postcss-url': {},
    'weapp-tailwindcss': {
      config: 'tailwind.config.js', // 如果有 tailwind 配置文件请指定路径
    },
    'postcss-preset-env': {},
  }
}
 
// 创建或者更新 tailwind 配置文件 tailwind.config.js
// tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.{html,js}', './components/**/*.{html,js}'], // 根据实际目录结构配置
  darkMode: false, // 或 'media' 或 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
 
// 在小程序的 wxss 文件中使用 @import 引入 tailwind 样式
/* 小程序页面或组件的 wxss 文件 */
@import '~weapp-tailwindcss/dist/index.wxss';
 
.bg-white {
  background-color: var(--tw-colors-white); /* 使用 tailwindcss 提供的颜色变量 */
}

以上代码示例展示了如何在小程序项目中使用 weapp-tailwindcss 插件来引入 Tailwind CSS 工具类。首先安装必要的依赖，然后配置 postcss 以使用 weapp-tailwindcss 插件，并指定 Tailwind CSS 的配置文件。最后，在小程序的 wxss 文件中使用 @import 引入 tailwind 样式，并且可以开始使用 Tailwind CSS 提供的工具类了。

【重识 HTML + CSS】盒子模型相关知识点

2024-08-19




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型示例</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            padding: 20px;
            border: 5px solid blue;
            margin: 10px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box">盒子内容</div>
</body>
</html>

这段代码定义了一个类名为.box的CSS样式，它包括了width、height、padding、border、margin和background-color属性。在HTML中，应用了这个类的<div>元素将展现出这样的盒子模型，其实际大小将是：

内容宽度（Content width）：300px

内容高度（Content height）：200px

元素宽度（Element width）：

内容宽度 + 左右内边距 = 300px + 20px + 20px = 340px

元素高度（Element height）：

内容高度 + 上下内边距 = 200px + 20px + 20px = 240px

可视区域宽度（Visual area width）：

元素宽度 + 左右边框 = 340px + 10px + 5px = 360px

可视区域高度（Visual area height）：

元素高度 + 上下边框 = 240px + 10px + 5px = 260px

这个示例展示了如何计算和设计一个盒子模型，并且如何通过CSS控制元素的内部和外部间距，以及边框和背景色。

css的背景

2024-08-19

CSS背景属性可以用来设置元素的背景样式。以下是一些常用的CSS背景属性：

background-color: 设置元素的背景颜色。
background-image: 设置元素的背景图片。
background-repeat: 设置背景图片是否及如何重复。
background-position: 设置背景图片的初始位置。
background-size: 设置背景图片的大小。
background-clip: 设置背景的绘制区域。
background-origin: 设置背景图片的定位区域。
background-attachment: 设置背景图片是否固定或者随着页面滚动。

示例代码：




/* 设置背景颜色为蓝色 */
div {
  background-color: blue;
}
 
/* 设置背景图片，不重复，位于左上角 */
div {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: left top;
}
 
/* 设置背景图片，覆盖整个元素，不重复，居中 */
div {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
 
/* 设置背景图片固定，不随页面滚动 */
div {
  background-image: url('image.jpg');
  background-attachment: fixed;
}

简写形式可以一次性设置多个背景属性：




/* 简写形式设置背景 */
div {
  background: #ff0000 url('image.jpg') no-repeat center fixed;
}

请根据具体需求选择合适的属性进行设置。

css background-color属性无效

2024-08-19

解释：

background-color 属性无效可能是由于几个原因造成的：

选择器错误：可能没有正确选择到元素，或者选择器优先级不足以覆盖其他样式规则。
语法错误：background-color 属性后的值可能有语法错误，例如颜色名、十六进制颜色代码或 RGB/RGBA 值的格式不正确。
层叠问题：如果有多个样式规则应用到同一元素，并且这些规则中包含 background-color 属性，可能发生层叠问题，导致预期的颜色没有被应用。
浏览器兼容性问题：有时候，颜色值可能在某些浏览器中不被支持。

解决方法：

检查并修正选择器，确保它正确选择了元素，并且优先级足够高。
检查 background-color 属性的语法，确保使用了正确的颜色值格式。
如果存在层叠问题，可以尝试提高选择器的优先级，或者使用 !important 规则来确保颜色被应用。
检查并测试在不同的浏览器中是否存在兼容性问题，如有必要，使用兼容性更好的颜色值或者使用浏览器前缀。

示例代码：




/* 确保选择器正确 */
.selector {
  background-color: #ff0000; /* 使用十六进制颜色 */
}
 
/* 提高优先级 */
.selector!important {
  background-color: #ff0000; /* 使用 !important 提高优先级 */
}

CSS-flex布局

2024-08-19

CSS的Flexbox（弹性盒子）布局提供了一种更灵活的方式来对容器内的项目进行排列、对齐和分配空间。以下是一些关键的CSS属性和它们的作用：

display: flex; - 这将创建一个弹性容器。
flex-direction - 定义项目的方向，可以是行（row，默认）、行反向（row-reverse）、列（column）或列反向（column-reverse）。
justify-content - 定义项目在主轴上的对齐方式，可以是flex-start（默认）、flex-end、center、space-between或space-around。
align-items - 定义项目在交叉轴上的对齐方式，可以是flex-start、flex-end、center、baseline或stretch（默认）。
flex-wrap - 定义当容器太小无法放下所有项目时是否应该换行，可以是nowrap（默认）、wrap或wrap-reverse。
flex-flow - 是flex-direction和flex-wrap的简写形式，默认为row nowrap。

下面是一个简单的Flex布局示例：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:




.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  background-color: lightblue;
}
 
.flex-item {
  width: 50px;
  height: 50px;
  background-color: coral;
  margin: 10px;
}

这个例子中，.flex-container 是一个弹性容器，它拥有三个子元素 .flex-item，这些项目在容器中水平排列，每个项目周围有间距，并且容器两端的空间分布对称。

SublimeText3格式化插件HTML-CSS-JS Prettify

2024-08-19

HTML-CSS-JS Prettify 插件是 Sublime Text 3 的一个格式化插件，可以用于格式化 HTML、CSS 和 JS 代码。

安装方法：

打开 Sublime Text 3。
按下 Ctrl+Shift+P 打开命令面板。
输入 install package 并选择它。
等待加载包列表，然后输入 HTML-CSS-JS Prettify 并选择它。
等待插件安装完成。

使用方法：

打开你想要格式化的 HTML、CSS 或 JS 文件。
选中你想要格式化的代码。
按下 Ctrl+Alt+H 来格式化 HTML，或者 Ctrl+Alt+C 来格式化 CSS 和 JavaScript。

注意：如果你的 Sublime Text 3 无法找到这些快捷键，可能是因为你的操作系统是 MacOS 或者你的快捷键设置与默认设置不同。你可以通过 Preferences > Key Bindings 查看或修改快捷键绑定。

如果你想要自定义快捷键，可以在你的 Sublime Text 3 的用户快捷键配置文件中添加如下内容：




{
    "keys": ["your_shortcut"], "command": "html_css_js_prettify",
    "args": {
        "selection_only": false,
        "use_tabs": false,
        "tab_size": 4,
        "indent_with_tabs": true,
        "space_in_empty_paren": true,
        "space_in_paren": true,
        "jslint": false,
        "space_after_anon_function": true,
        "space_after_named_function": true,
        "brace_style": "collapse",
        "unindent_chained_methods": true,
        "break_chained_methods": false,
        "keep_array_indentation": false,
        "keep_function_indentation": false,
        "eval_code": false,
        "space_before_conditional": true,
        "unescape_strings": false,
        "wrap_line_length": 0,
        "end_with_newline": false,
        "comma_first": false,
        "operator_position": "before-newline",
        "indent_empty_lines": false
    }
}

请将 "your_shortcut" 替换为你想要设置的快捷键，并根据需要调整其他参数。

CSS中设置背景的7个属性及简写background注意点

2024-08-19

CSS中设置背景的7个属性包括：

background-color：设置背景颜色。
background-image：设置背景图片。
background-repeat：设置背景图片是否和如何重复。
background-position：设置背景图片的位置。
background-size：设置背景图片的大小。
background-clip：设置背景的裁剪区域。
background-origin：设置背景图片的定位原点。

简写属性background可以同时设置这些属性，例如：




background: #ff0000 url(image.jpg) no-repeat left top / cover content-box content-box;

简写时的顺序为：




background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] [background-size] [background-clip] [background-origin];

注意点：

简写时，如果不设置某个值，其默认值将会应用（例如repeat、scroll、top left、auto等）。
background-size 和 background-position 可以使用 / 分隔，background-position 在 / 前设置表示背景图片的定位，在 / 后设置表示背景图片的大小。
如果只设置 background-size 而不设置 background-position，则 background-position 默认为 center。
如果省略 background-repeat，则默认为 repeat。

postcsspxtoviewport根据不同属性转vw和vh

2024-08-19

PostCSS 插件 postcss-px-to-viewport 可以帮助你将 CSS 中的 px 单位转换成 vw 和 vh 单位。以下是如何使用该插件的示例代码：

首先，安装 postcss-px-to-viewport：




npm install postcss-px-to-viewport --save-dev

然后，在你的 PostCSS 配置文件中引入并使用这个插件：




// postcss.config.js
 
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 要转换的单位
      viewportWidth: 750, // 设计稿宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ['*'], // 指定转换那些属性，* 表示全部
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: [], // 过滤掉那些不进行转换的CSS选择器
      minPixelValue: 1, // 小于或等于`1px`不转换
      mediaQuery: false, // 是否在媒体查询中也转换`px`
      replace: true, // 是否直接更换原来的单位
      exclude: [/node_modules/], // 忽略那些文件
      landscape: false // 是否添加landscape视口宽度
    }
  }
};

在你的 CSS 文件中，你可以这样写：




/* input */
.element {
  width: 375px;
  height: 200px;
  font-size: 14px;
}

postcss-px-to-viewport 会转换成：




/* output */
.element {
  width: 100vw;
  height: 13.33333vw;
  font-size: 4.26667vw;
}

这样，你的样式表就会根据设计稿的宽度自动转换成对应的 vw 和 vh 单位。