在这里插入图片描述

萌新别慌：13条CSS优化技巧让你的页面快到飞起——附实战避坑指南

前端萌新别慌：13条CSS优化技巧让你的页面快到飞起——附实战避坑指南

说实话，我刚学前端那会儿，CSS给我整的活儿可比JavaScript刺激多了。JS报错好歹控制台给你红彤彤一片告诉你错哪儿了，CSS呢？它默不作声，就是不出效果，你盯着屏幕发呆半小时，最后发现是选择器优先级写错了，或者 worse——你写在了scoped里但忘了加deep。那种想砸键盘的冲动，懂的都懂。

今天咱不整那些"CSS从入门到精通"的八股文，就唠唠我这些年踩坑踩出来的13条野路子。这些技巧不是我从哪本教材上抄的，是真真切切在项目里被产品经理催过、被设计师怼过、被测试提bug提崩溃后，总结出来的求生秘籍。看完这篇，保证你写的CSS能让页面飞起来，维护的时候自己看着也舒服。

为啥你的CSS越写越像意大利面条

先吐槽个现象。我见过太多新手写CSS，刚开始还好，项目跑俩月后打开那个.css文件，嚯，那叫一个 spaghetti code，各种选择器层级嵌套得跟故宫似的，深宫大院找不着北。你自己写的代码，过三周再看——“这 TM 是我写的？”

其实究其原因，大多数人把CSS当"随便写写就能跑"的东西。html结构一复杂，class命名就开始放飞自我，box1、box-wrap、wrapper-2、content-left-final-real这种名字都出来了。然后为了覆盖之前的样式，开始疯狂加!important，最后整个文件跟打补丁似的，东一块西一块。

咱得先端正态度：CSS也是正经代码，也得有架构思维。它不是页面的"化妆品"，而是骨架的"结构工程"。你写得乱，浏览器解析起来也费劲，渲染性能直接拉胯。

CSS到底背着你干了多少脏活累活

很多人以为CSS就是"画皮"的，给html穿上漂亮衣服就完事了。天真了兄弟。浏览器拿到你的HTML和CSS后，背后要干的事可多了去了：

  1. 解析（Parsing）：浏览器得先把你的CSS字符串解析成AST（抽象语法树），这个过程中任何语法错误都可能导致整行甚至整段样式被丢弃。

  2. 选择器匹配（Selector Matching）：这是最耗性能的一环。浏览器要遍历DOM树，把每个选择器跟节点匹配。你写.container .sidebar .nav-item a span，浏览器得从右往左查——先找到所有span，再看它爹是不是a，再看它爷爷是不是.nav-item……一直到最外层。层级越深，计算量指数级增长。

  3. 层叠计算（Cascade）：匹配上之后还要按优先级排序，特殊性（specificity）计算那套规则，算法复杂度听着就头疼。

  4. 布局（Layout/Reflow）：确定了谁应用啥样式后，浏览器要计算每个元素的位置和大小。这里你改个width，可能整棵布局树都要重算。

  5. 绘制（Paint/Repaint）：最后还要把像素画到屏幕上。某些属性比如box-shadow和border-radius，绘制成本贼高。

所以你说CSS轻量？它负担重着呢！优化CSS本质上就是在帮浏览器减负。

选择器这玩意儿，能简单就别装深沉

我见过最离谱的选择器长这样：

/* 别笑，这是真实存在的代码 */
body > .wrapper .container .left-section .nav-menu ul li.item a:hover span.icon {
    color: #ff0000 !important;
}

这种写法在技术评审会上看到，我直接眼前一黑。先不说超过三层嵌套已经很难维护了，浏览器解析这个选择器时得多累啊。CSS选择器是从右往左匹配的，这意味着它要先找到页面上所有的span.icon，然后一个个检查是不是在a:hover里，再检查是不是在li.item里……一直到最外层的body。

正确的姿势是————扁平化，能用一个class搞定的事绝不多层嵌套：

/* ❌ 糟糕的写法 - 浏览器要遍历DOM树多层 */
.sidebar ul li a {
    color: #333;
}

/* ✅ 优雅的写法 - 直接定位 */
.nav-link {
    color: #333;
}

如果你担心命名冲突，后面会聊BEM方法论。现在先记住：选择器越短越好，越具体越好，避免使用标签选择器和通配符做全局匹配。

还有，别把ID选择器和class选择器混着用 #header .nav 这种。ID的特殊性太高，以后想覆盖都费劲，而且文档里ID理论上应该唯一（虽然浏览器容错 Duplicate ID，但别这么干）。

!important这个字，能不用就憋回去

我知道，我知道，写CSS写到半夜两点，那个该死的边框颜色死活改不过来，一气之下color: red !important;敲下去，世界清净了。但这就是典型的技术性债务——你现在爽了，下个月需求变更要改主题色，你看看自己挖的坑怎么填。

!important本该是给第三方库覆盖或者某些极其特殊的场景用的，比如你要覆盖element-ui的某个顽固样式：

/* 覆盖组件库的顽固样式，不得已而为之 */
.el-button--primary {
    background-color: #1890ff !important;
    border-color: #1890ff !important;
}

但如果你自己写的业务代码里到处都是!important，那说明你的CSS架构已经烂了。问题通常出在：

  1. 选择器优先级计算没搞懂，被其他样式覆盖了
  2. 加载顺序错乱，后加载的样式权重不够

正确解决优先级问题的方案是增加特殊性，而不是暴力覆盖：

/* 假设你被 .card .title 的样式覆盖了 */
/* ❌ 不要这样 */
.my-title {
    font-size: 16px !important;
}

/* ✅ 增加特殊性来获胜 */
.card .title.my-title {
    font-size: 16px;
}

/* 或者更语义化地使用父级限定 */
.article-card .article-title {
    font-size: 16px;
}

记住：!important是创可贴，但你不能靠创可贴止血，得去缝伤口。

文件合并与拆分，这是个哲学问题

以前老前辈教我们要把CSS合并成一个文件减少HTTP请求，那是HTTP/1.1时代的真理。现在都HTTP/2甚至HTTP/3了，多路复用搞得飞起，你还把所有CSS打包成一个几MB的bundle.css，首屏加载慢得像蜗牛爬。

现代项目的正确打开方式是——关键CSS内联，非关键CSS延迟加载。

什么叫关键CSS？就是首屏必须有的样式，比如导航栏、首屏banner、文字排版基础样式。这部分你可以直接<style>标签塞在<head>里，甚至内联到HTML，让浏览器不用额外发请求就能渲染首屏：

<head>
    <style>
        /* 关键CSS - 首屏渲染必需品 */
        body { margin: 0; font-family: system-ui; }
        .header { 
            position: fixed; 
            top: 0; 
            width: 100%; 
            background: #fff; 
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .hero-section { 
            padding-top: 60px; 
            min-height: 100vh; 
            display: flex; 
            align-items: center;
        }
        /* ...其他首屏样式 */
    </style>
    
    <!-- 非关键CSS异步加载 -->
    <link rel="preload" href="/css/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="/css/non-critical.css"></noscript>
</head>

上面那段代码看明白了吗？rel="preload"告诉浏览器"这文件很重要，提前下载"，而onload事件里把它变成rel="stylesheet"是为了不阻塞渲染。如果用户禁了JS，还有<noscript>兜底。

还有媒体查询的妙用。打印样式、横屏样式、暗黑模式，这些没必要在页面打开就加载：

<!-- 只在打印时加载，不阻塞首屏 -->
<link rel="stylesheet" href="/css/print.css" media="print">

<!-- 只在横屏时加载 -->
<link rel="stylesheet" href="/css/landscape.css" media="screen and (orientation: landscape)">

<!-- 暗黑模式 -->
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)">

看到没，善用media属性，浏览器会自动优化，不会不必要的样式文件不会阻塞渲染。

字体加载这破事儿，真的让人头大

你精心设计了一套用了Google Fonts或者自己上传的思源黑体，结果页面打开，文字先显示一圈思源黑体，突然"啪"一下变成无衬线字体，等字体文件下载完又"啪"一下变回来。这就是臭名昭著的FOIT（Flash of Invisible Text）和FOUT（Flash of Unstyled Text）。

解决方案是用font-display属性，这玩意儿简直是前端救星：

/* 基本用法 */
@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff2') format('woff2');
    font-display: swap; /* 关键点 */
}

/* 实际应用 */
body {
    font-family: 'MyWebFont', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

font-display有几个值：

  • auto：浏览器默认，通常是block，FOIT问题严重
  • block：先空白，字体来了再显示（ worst 体验）
  • swap：先用备用字体顶着，来了再换（推荐，可能有FOUT但能看字）
  • fallback：先block一小会儿（100ms左右），然后swap
  • optional：更激进的策略，如果字体没缓存且下载慢，就直接用备用字体

swap是最稳妥的，至少用户能立刻看到内容，而不是对着空白发呆。那个"啪"一下的切换确实有点突兀，但你可以用CSS动画柔和过渡：

/* 让字体切换更平滑 */
body {
    font-family: 'MyWebFont', sans-serif;
    font-display: swap;
    /* 优化渲染，等字体完全加载再计算布局 */
    font-synthesis: none; /* 防止浏览器合成粗体/斜体 */
}

/* 针对自定义字体的优雅降级 */
.wf-loading body {
    font-family: sans-serif;
    opacity: 0.9; /* 轻微透明提示内容未完全就绪 */
}
.wf-active body {
    opacity: 1;
    transition: opacity 0.2s ease;
}

还有个小技巧，如果你用Google Fonts，可以加上display=swap参数：

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

动画性能：别再用JS硬堆，GPU加速不香吗

还在用setInterval或者requestAnimationFrame手动改left和top做动画？停手吧，那玩意儿会触发Layout和Paint，全程CPU计算，卡成PPT是常态。

CSS动画的正确姿势是只用这两个属性：transform和opacity。它们能触发GPU加速，走合成器线程，不卡主线程，丝滑得一匹。

/* ❌ 糟糕的动画 - 触发Layout和Paint，性能杀手 */
.box {
    position: absolute;
    left: 0;
    transition: left 0.3s;
}
.box:hover {
    left: 100px; /* 触发重排 */
}

/* ✅ 优秀的动画 - 仅触发Composite */
.box {
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.box:hover {
    transform: translateX(100px); /* GPU加速，丝滑 */
}

transform能干的事多了去了，位移、旋转、缩放、倾斜，全都能硬件加速：

/* 实战案例：卡片悬停效果 */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform; /* 提前告诉浏览器准备动画 */
}

.card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* 页面滚动指示器 */
.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00d4ff);
    transform-origin: left;
    /* 结合JS修改scaleX，比改width性能高10倍 */
    transform: scaleX(var(--scroll-progress, 0));
    transition: transform 0.1s linear;
}

注意那个will-change属性，它是用来提前告知浏览器"这个元素要变了，你准备一下"。但别滥用，用多了会占用太多GPU内存，反而导致卡顿。只在确定要动画的元素上用，动画结束记得移除。

还有contain属性，这玩意儿是性能优化的隐藏大招：

/* 告诉浏览器这个元素内部的变化不会影响外部 */
.animated-widget {
    contain: layout style paint;
    /* 或者更强的隔离 */
    contain: strict;
}

用了contain: layout，浏览器就知道即使这个元素内部重排了，也不会影响外面的布局，可以大胆优化渲染。

@import这货就是个坑，千万别踩

有些同学喜欢把CSS拆成很多小文件，然后用@import在主文件里引入：

/* main.css */
@import url('base.css');
@import url('layout.css');
@import url('components.css');

看起来挺优雅是吧？实际上这玩意儿是性能灾难。@import是同步的，浏览器得先下载、解析完main.css，发现里面有@import，再去下载base.css，下完再解析，再发现下一个@import……串行加载，光速白屏。

正确姿势是用HTML的<link>标签，它们可以并行下载：

<!-- ✅ 并行加载，速度更快 -->
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="components.css">

如果你非要用CSS模块化，请用构建工具（Webpack、Vite、Parcel）在打包阶段合并，而不是 runtime 用@import。

伪类和伪元素，小心别玩脱了

:hover、:focus、:nth-child()、::before、::after这些确实很好用，但有些坑你得知道。

首先，:hover在移动端是个玄学问题。iOS Safari上点击会触发 hover，但有时候又不消失，需要再点一下。如果你给很大的区域加了复杂的:hover效果，可能会让用户困惑。

其次，某些伪类选择器性能很差，比如:nth-child()、:nth-of-type()，它们每次渲染都要重新计算元素位置。如果你在几千行的列表里用这个，帧率直接掉光。

::before和::after生成的伪元素，虽然不在DOM里，但浏览器照样要渲染它们。用得太多会增加绘制负担。

/* 性能友好的做法 - 避免复杂伪类计算 */
/* ❌ 别在大列表里用 */
.large-list li:nth-child(odd) { background: #f5f5f5; }

/* ✅ 用class替代 */
.large-list li.odd-item { background: #f5f5f5; }
/* 或者用CSS变量，一次计算多处使用 */
.large-list {
    --odd-bg: #f5f5f5;
}
.large-list li:nth-child(odd) {
    background: var(--odd-bg); /* 虽然还是要计算，但缓存友好些 */
}

还有个小细节，input的:placeholder颜色设置，别直接在input上写，用伪元素：

/* 统一placeholder样式，减少浏览器默认样式的repaint */
input::placeholder,
textarea::placeholder {
    color: #bfbfbf;
    opacity: 1; /* Firefox默认opacity不是1 */
    transition: color 0.3s;
}

input:focus::placeholder {
    color: transparent; /* 聚焦时淡出 */
}

清理僵尸CSS，该断舍离了

项目跑了一年，需求改了八百回，CSS文件从50k膨胀到500k，打开一看，一大半class早没地方用了。这时候你需要PurgeCSS或者UnCSS这种工具来自动清理。

Webpack配置示例：

// webpack.config.js
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob-all');

module.exports = {
    // ...其他配置
    plugins: [
        new PurgeCSSPlugin({
            paths: glob.sync([
                path.join(__dirname, 'src/**/*.html'),
                path.join(__dirname, 'src/**/*.vue'),
                path.join(__dirname, 'src/**/*.jsx')
            ]),
            // 白名单 - 这些class即使没用也别删
            safelist: ['active', 'show', 'hide', /^modal-/]
        })
    ]
};

如果你用Tailwind CSS，它内置了JIT模式，只生成你用到的class，天然解决这个问题。但传统CSS项目，定期清理真的很重要。

手动的土办法也行——Chrome DevTools的Coverage面板，可以分析哪些CSS没被用到，标红的就是僵尸代码。打开方式：DevTools -> 右上角三个点 -> More Tools -> Coverage。

响应式新格局：容器查询真香

以前做响应式，就是无脑堆媒体查询：

@media (max-width: 768px) { ... }
@media (max-width: 480px) { ... }

但问题是，组件的样式依赖全局视口宽度，有时候很蠢。比如一个卡片组件，在大屏里并排显示时应该横排，在侧边栏里显示时即使视口很宽也应该竖排。

**容器查询（Container Queries）**就是来解决这个的：

/* 定义容器 */
.card-wrapper {
    container-type: inline-size; /* 或者 size */
    container-name: card; /* 可选，命名容器 */
}

/* 基于容器宽度而非视口宽度 */
@container (min-width: 400px) {
    .card {
        display: flex;
        flex-direction: row;
    }
    .card-image {
        width: 40%;
    }
    .card-content {
        width: 60%;
    }
}

@container (max-width: 399px) {
    .card {
        display: flex;
        flex-direction: column;
    }
    .card-image,
    .card-content {
        width: 100%;
    }
}

这下组件真正做到了"响应式"——根据自己在父容器里的可用空间调整布局，而不是傻乎乎看屏幕宽度。

浏览器支持现在也挺好了，Chrome 105+、Firefox 110+、Safari 16+，新项目可以放心用。

CSS变量：不是玩具，是真·架构级武器

CSS自定义属性（变量）刚出那会，很多人觉得"这不就是Sass变量换了个写法吗"。大错特错，它可比Sass变量强大多了，因为它是动态的。

:root {
    --primary-color: #007bff;
    --spacing-unit: 8px;
    --border-radius: 4px;
    --transition-speed: 0.3s;
}

/* 使用变量 */
.button {
    background: var(--primary-color);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border-radius: var(--border-radius);
    transition: all var(--transition-speed) ease;
}

/* 暗黑模式一键切换 */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #4dabf7;
        --bg-color: #1a1a1a;
        --text-color: #e0e0e0;
    }
}

/* 或者给特定区域覆盖 */
.theme-dark {
    --primary-color: #4dabf7;
    --bg-color: #1a1a1a;
}

最骚的是结合JavaScript动态修改变量值，实现运行时主题切换：

// 实时修改主题色，无需重新编译CSS
document.documentElement.style.setProperty('--primary-color', '#ff6b6b');

// 甚至可以根据鼠标位置做视差效果
document.addEventListener('mousemove', (e) => {
    const x = e.clientX / window.innerWidth;
    const y = e.clientY / window.innerHeight;
    
    document.documentElement.style.setProperty('--mouse-x', x);
    document.documentElement.style.setProperty('--mouse-y', y);
});

/* 结合CSS变量做动态效果 */
.parallax-element {
    transform: translate(
        calc(var(--mouse-x) * 20px - 10px),
        calc(var(--mouse-y) * 20px - 10px)
    );
    transition: transform 0.1s ease-out;
}

这比改class或者直接操作style高效多了，而且符合"关注点分离"原则，样式逻辑在CSS里，交互逻辑在JS里。

样式不生效？排查三板斧

“我写了CSS为啥不生效？”——这可能是前端被问得第二多的问题（第一是"为啥我npm install报错了"）。

排查流程记好了：

第一步：看选择器对不对
打开DevTools，选中元素，看右侧Styles面板里有没有你的CSS规则。如果没有，说明选择器写错了，或者文件没加载。

第二步：看优先级谁赢了
如果有你的规则但是被划掉了，看上面哪个规则覆盖了它。 calculated specificity 在Computed面板里看。特殊性计算公式：ID选择器数量 * 100 + class/属性选择器数量 * 10 + 标签选择器数量 * 1。

第三步：看是不是 scoped 或者 shadow DOM
如果你用Vue、React CSS Modules，或者Web Components，样式是隔离的。Vue的scoped CSS会给元素加data-v-xxxx属性，你的选择器得匹配这个属性。如果要穿透，用:deep()或者>>>。

/* Vue scoped 样式穿透 */
.parent :deep(.child) {
    color: red;
}

/* 或者深度选择器 */
.parent >>> .child {
    color: red;
}

第四步：看缓存
Ctrl+F5 强制刷新，或者Network面板勾选Disable Cache。有时候是缓存了旧CSS。

第五步：看语法错误
CSS语法错误会导致整个规则集失效，但浏览器又不会报错。检查是不是少了分号、括号不匹配。

开发习惯：现在偷懒，半夜加班

最后唠叨点工程化的事儿。

BEM命名规范真的很有用，不是为了装逼，是为了防止class名冲突：

/* Block Element Modifier */
.card { }                    /* Block */
.card__title { }             /* Element */
.card__title--large { }      /* Modifier */
.card--dark { }              /* Block Modifier */

/* 实际例子 */
.user-profile { }
.user-profile__avatar { }
.user-profile__avatar--round { }
.user-profile__info { }
.user-profile__info--vip { }

看到class名就知道结构关系，还不会产生全局污染。

stylelint必须配上，统一团队代码风格，避免谁写4空格谁写2空格这种撕逼：

// .stylelintrc.json
{
    "extends": "stylelint-config-standard",
    "rules": {
        "indentation": 2,
        "string-quotes": "single",
        "color-hex-case": "lower",
        "selector-class-pattern": "^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$"
    }
}

注释要写好，但别写废话：

/* ✅ 有用的注释 - 解释为什么这么写 */
/*  Hack: IE11不支持grid，降级到flex布局  */
.ie-fallback {
    display: flex;
}

/* ❌ 废话注释 */
/* 把字体设为红色 */
.text-red {
    color: red;
}

还有个暗黑技巧——CSS代码分组组织：

/* 
 * COMPONENT: Button
 * -----------------
 * 基础按钮样式，包含主要、次要、危险三种类型
 */

.btn {
    /* Box Model */
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    
    /* Typography */
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    
    /* Visual */
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s;
    
    /* Misc */
    user-select: none;
    -webkit-appearance: none;
}

/* Modifiers */
.btn--primary { background: var(--primary); color: #fff; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--large { padding: 12px 24px; font-size: 16px; }

按Box Model、Typography、Visual分组，找属性的时候快多了。

好了，13条秘籍全唠完了。最后整点真情实感——CSS这玩意儿，真不在于你记了多少属性，用了多炫酷的技巧。什么grid布局多精妙、clip-path搞出花来，这些固然厉害，但最能体现水平的，是你三个月后回来看自己的代码，能不能秒懂意图，能不能快速修改不出bug。

代码是写给人看的，顺便给机器运行。把命名搞好、结构搞清晰、性能优化到位，比啥都强。当然，如果你能把这篇文章里的技巧都用上，至少能保证你的页面不会卡成狗，维护的人也（大概率）不会半夜给你发微信骂娘。

就这样，赶紧把项目里的!important清一清去吧。

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

专栏系列（点击解锁） 学习路线(点击解锁） 知识定位
《微信小程序相关博客》 持续更新中~ 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》 持续更新中~ AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》 《前端基础入门三大核心之html相关博客》 前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
《前端基础入门三大核心之JS相关博客》 前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。
通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
《前端基础入门三大核心之CSS相关博客》 介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
《canvas绘图相关博客》 Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》 持续更新中~ 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》 持续更新中~ Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》 持续更新中~ SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》 持续更新中~ 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》 持续更新中~ 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
《信息化人员基础技能知识相关博客》 无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
《信息化技能面试宝典相关博客》 涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》 持续更新中~ 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》 持续更新中~ 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》 持续更新中~ 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！

在这里插入图片描述

# css # 前端 # 面试宝典
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

AIGC率太高怎么办？10个“去AI味”指令+3款降AI工具实测，AI率99.9%降至5.7%

avatar 2048 AI社区
cover

不花一分钱！10个“去AI味”指令+3款降AI工具实测，AI率99.9%降至5.7%

avatar 2048 AI社区
cover

为了降AIGC率，我试了6种降AI方法，终于把99.9%的AI率降到了5.7%

avatar 2048 AI社区