新手前端必看：5种CSS隐藏元素方法全解析（附避坑指南）
新手前端必看：5种CSS隐藏元素方法全解析（附避坑指南）
刚入门前端那会儿我也觉得，隐藏元素不就是display: none一下的事儿吗？直到有次面试，面试官轻飘飘问了句："除了display还有啥办法？"我当场愣在那儿，脑子里跟蓝屏了似的。那场面，尴尬得我能用脚抠出个三室一厅。
后来我在实际项目里被各种隐藏需求毒打了一遍——做下拉菜单时点错了整个页面抖，做模态框时盲人能tab到"隐形"按钮，做SEO时藏的内容全被爬虫抓了个正着。才发现这事儿水很深，藏得好不好，直接关系到性能、体验、甚至饭碗。
今天就把我踩过的坑、翻烂的MDN、还有偷看Chrome源码的心得，一股脑儿倒给你。咱不整那些虚头巴脑的概念，直接说人话，上代码，看完你就能拿去吹牛逼。
先搞清楚：你那不叫隐藏，叫瞎搞
很多人以为看不见就是隐藏，错！浏览器眼里，这事儿分好几种段位：
有的隐藏是物理抹除——元素直接不存在了，不占地儿不渲染，跟删了差不多；有的是视觉欺骗——眼睛看不见，但 DOM 还在那儿杵着，占着茅坑不拉屎；还有的是哲学隐藏——看得见摸不着，或者摸不着但摸得着（我在说啥？）。
搞清楚这个区别特别重要，因为后续所有bug都源于此。比如你以为藏了个按钮，结果键盘用户疯狂按tab键，焦点"嗖"地一下跳到了屏幕外，这体验简直是灾难。
方案一：display: none —— 狠人专用，斩草除根
这是最狠的一招，彻底把元素从渲染树里踢出去。浏览器直接跳过它，不分配空间，不渲染内容，仿佛这个元素从来没存在过。
/* 简单粗暴，一刀切 */
.hidden-brutal {
display: none;
}
/* restore的时候记得原来的值，别直接写block，万一人家原本是flex呢 */
.show-again {
display: block; /* 危险！如果原先是inline-flex就崩了 */
}
/* 正确姿势是用class切换，或者用CSS变量 */
.element {
display: var(--original-display, block);
}
.element.is-hidden {
display: none;
}
但这里有个巨坑：过渡动画无效！你想啊，元素直接从有变无，浏览器根本不给中间帧，所以transition在这上面完全失效。如果你想做个淡入淡出的效果，display: none直接让你希望破灭。
还有个细节，很多人不知道：用display: none隐藏的元素，连CSS动画都不走。比如你给隐藏的元素加了个@keyframes旋转，等显示出来的那一刻，它不会补帧，而是直接从当前状态开始。这在一些需要后台运行动画的场景里就很要命。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 100px;
height: 100px;
background: #ff6b6b;
transition: all 0.3s ease;
}
.box.hidden {
display: none; /* 点下去直接消失，没有任何过渡效果 */
}
/* 想做过渡？没门儿，这是不可能的版本 */
.wrong-attempt {
display: none;
opacity: 0;
transition: opacity 0.3s; /* 白写了，不执行 */
}
</style>
</head>
<body>
<div class="box" id="brutalBox">点我试试</div>
<button onclick="document.getElementById('brutalBox').classList.toggle('hidden')">
切换显示
</button>
</body>
</html>
所以记住：用display: none就别想过渡动画，想过渡就别用这个。
方案二：visibility: hidden —— 薛定谔的隐藏，占着茅坑不拉屎
这招也挺有意思，元素看不见，但位置还留着，就像穿了隐身衣站在那儿。文档流里该占多大地方还占多大，只是透明了。
.ghost-mode {
visibility: hidden;
/* 重点来了：虽然看不见，但transition是有效的！ */
transition: visibility 0s 0.3s, opacity 0.3s; /* 延迟隐藏，先透明再藏 */
}
.ghost-mode.visible {
visibility: visible;
opacity: 1;
transition: opacity 0.3s; /* 显示时直接透明度过渡 */
}
/* 更实用的做法，配合opacity做淡出 */
.fade-out-slowly {
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.5s, opacity 0.5s ease;
}
.fade-out-slowly.show {
visibility: visible;
opacity: 1;
transition: opacity 0.5s ease; /* 显示不需要延迟 */
}
这里有个细节中的细节：visibility虽然支持过渡，但它是"台阶式"的，不是0到1的数值，而是visible或hidden两个状态。所以上面的代码用了个小技巧——让visibility在opacity过渡完之后再变，这样视觉上就是先淡再藏。
还有个坑：子元素想单独显示怎么办？ 默认情况下，父元素visibility: hidden了，子元素也继承这个状态。但你可以强行给子元素设置visibility: visible，让它在"隐形家族"中鹤立鸡群。
.parent-invisible {
visibility: hidden;
background: #f0f0f0;
padding: 20px;
}
.child-rebel {
visibility: visible; /* 我命由我不由父 */
background: #4ecdc4;
padding: 10px;
}
这招在做那种"整行选中但保留某个操作按钮"的需求时特别好用。
方案三：opacity: 0 —— 皇帝的新衣，假装看不见
这是最温柔的隐藏，元素还在那儿，还能点，还能选中文字，只是你看不见。就像给元素泼了盆隐形药水。
.invisible-cloak {
opacity: 0;
transition: opacity 0.3s ease;
/* 但是！它还能被点击！ */
cursor: pointer;
}
.invisible-cloak:hover {
opacity: 0.1; /* hover时稍微露个脸，证明存在感 */
}
/* 如果你想要"看不见也点不着"，得配合pointer-events */
.true-invisible {
opacity: 0;
pointer-events: none; /* 禁用鼠标事件，但键盘事件还在！ */
}
/* 彻底隔绝交互 */
.ultimate-hide {
opacity: 0;
pointer-events: none;
position: absolute; /* 移出文档流，防止占空间 */
}
看到没？opacity: 0配合pointer-events: none才是比较安全的做法，不然用户对着空白处一顿狂点，触发了一堆意想不到的事件，调试时能把你逼疯。
但是，重点又来了——pointer-events: none挡不住键盘！用户按tab键，焦点还是会跑到这个"隐形"元素上。要做就做绝：
.accessible-hide {
opacity: 0;
pointer-events: none;
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0); /* 彻底剪裁，防止残留像素 */
/* 更好的是直接不让它参与tab顺序 */
tabindex: -1; /* 但是CSS里写不了这个，得在HTML里设置 */
}
HTML里记得加上：
<div class="accessible-hide" tabindex="-1" aria-hidden="true">
我是透明的，别找我
</div>
aria-hidden="true"告诉屏幕阅读器：“这个是装饰性的，不用读”，这对无障碍特别重要。
方案四：把元素踹出屏幕 —— 物理位移大法
这招比较野，老祖宗留下的手艺。原理简单粗暴：既然不想让人看见，那就把它扔到屏幕外面去，爱谁谁。
/* 初代版本，有点土但能用 */
.old-school {
position: absolute;
left: -9999px;
top: -9999px;
}
/* 进阶版本，稍微优雅点 */
.better-approach {
position: absolute;
left: -100vw; /* 相对于视口宽度，保证滚不出 */
top: -100vh;
opacity: 0; /* 双保险 */
}
/* 现代浏览器的标准做法 */
.modern-exile {
position: fixed; /* fixed比absolute更狠，滚动也不回来 */
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
但是注意！别瞎用left: -9999px，在某些移动端浏览器或者RTL（从右到左）布局的语言环境下，可能会出各种奇葩问题。而且这么做会让浏览器依然渲染这个元素，只是你看不见，性能上有些浪费。
更关键的是：这种隐藏方式对SEO不友好。搜索引擎爬虫有时候会觉得你在搞什么花样，特别是如果你用来隐藏关键字啥的，容易被误判为作弊。
还有一种"折叠"做法，适合那种既要隐藏又要保留动画的情况：
.collapse-it {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.collapse-it.open {
max-height: 500px; /* 得设一个足够大的值 */
}
但max-height过渡有个问题——你得预估内容高度，设小了内容被截断，设大了过渡时间不准（从500px缩到实际100px的时间和缩到400px的时间不一样）。现在有了更现代的方案：
/* Chrome 129+ 和 Firefox 支持下 */
.smart-collapse {
height: 0;
overflow: hidden;
interpolate-size: allow-keywords; /* 允许关键字插值 */
transition: height 0.3s ease;
}
.smart-collapse.open {
height: auto; /* 以前auto不能过渡，现在可以了！ */
}
可惜Safari还不支持，生产环境慎用。
方案五：clip-path 和 transform 骚操作 —— 视觉上抹除
这是比较新的玩法，属于视觉层面的彻底抹除。
/* clip-path 剪裁成零 */
.vanish-clip {
clip-path: inset(50%); /* 从四周各切50%，等于切没了 */
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
/* 这个方案对屏幕阅读器友好，有时用于" visually hidden 但可访问"的场景 */
}
/* 或者更彻底 */
.polygon-hide {
clip-path: polygon(0 0, 0 0, 0 0, 0 0); /* 四点重合，面积为零 */
}
/* transform 缩放归零 */
.shrink-to-nothing {
transform: scale(0);
transition: transform 0.3s ease;
/* 但是！它还在原来的位置占位，只是体积为零 */
/* 而且transform-origin要注意，默认是中心点 */
}
/* 组合技：移动+缩放 */
.teleport-away {
transform: translateX(-100%) scale(0);
opacity: 0;
transition: all 0.3s ease;
pointer-events: none;
position: absolute; /* 防止占位 */
}
clip-path这招有个特别妙的地方——元素其实还在交互区，但因为被剪成碎片了，你点不到。这在做一些特效时很有用，比如页面转场、元素消散效果。
但transform要注意坑：它会创建新的层叠上下文，可能影响z-index的表现。而且transform: scale(0)的元素虽然看不见，但如果没设置pointer-events: none，在某些浏览器里鼠标悬停还是会触发事件的。
避坑指南：这些坑我替你踩过了
坑一：Tab 键能 tab 到隐藏元素
这是最容易被忽视的。以为藏了就万事大吉，结果键盘用户疯狂 tab 时，焦点突然"消失"了——其实跑隐藏元素上去了。
解决方案：
// 暴力版：隐藏时移除tabindex
function hideElement(el) {
el.dataset.prevTabindex = el.tabIndex || '0';
el.tabIndex = -1;
el.setAttribute('aria-hidden', 'true');
el.classList.add('hidden');
}
function showElement(el) {
el.tabIndex = el.dataset.prevTabindex || '0';
el.removeAttribute('aria-hidden');
el.classList.remove('hidden');
}
// 优雅版：用inert属性（Chrome 102+, Firefox 112+, Safari 15.5+）
function toggleInert(el, hidden) {
el.inert = hidden; // inert=true 时，元素及其后代都不可交互，包括tab
el.hidden = hidden; // 原生hidden属性，相当于display:none
}
inert这个属性简直是神器，一键屏蔽所有交互，包括focus、点击、甚至find in page（Ctrl+F）都会跳过。但兼容性一般，生产环境得加polyfill。
坑二：隐藏元素事件还在跑
你以为藏了就安静了？不，定时器还在跑，resize监听还在刷，requestAnimationFrame还在疯狂回调。
// 错误示范：只是藏了，但没停逻辑
let animationId;
function badPractice() {
element.style.display = 'none';
// animationId 还在跑！内存泄漏警告！
animationId = requestAnimationFrame(loop);
}
// 正确姿势
class SmartComponent {
constructor() {
this.isVisible = true;
this.observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
this.isVisible = entry.isIntersecting;
if (!this.isVisible) {
this.pause();
} else {
this.resume();
}
});
});
this.observer.observe(this.element);
}
pause() {
cancelAnimationFrame(this.animationId);
// 清掉所有事件监听
window.removeEventListener('resize', this.handleResize);
}
resume() {
this.loop();
window.addEventListener('resize', this.handleResize);
}
}
用IntersectionObserver来判断元素是否真的在视口内，不在就停掉所有逻辑，省电省内存。
坑三：打印时全露馅了
你精心隐藏的广告、导航栏，用户按Ctrl+P打印时全出来了，尴尬不？
@media print {
.no-print {
display: none !important; /* 打印必须用这个，别整那些花里胡哨的 */
}
/* 或者反过来，只有打印时才显示 */
.print-only {
display: block !important;
}
/* 注意：很多通过position移出屏幕的在打印时会回来 */
.screen-only {
position: static !important;
left: auto !important;
}
}
特别提醒：不要用visibility: hidden或opacity: 0来应对打印，有些浏览器打印时会忽略这些样式，或者用户选择"打印背景图形"时就露馅了。打印必须用display: none。
坑四：父容器高度塌陷
这是display: none的连锁反应。一个撑开父元素高度的子元素突然没了，父元素高度突变，页面下面内容"唰"地跳上来，用户体验极差。
/* 错误：直接消失，页面抖动 */
.collapsible {
display: none;
}
/* 正确：保留高度动画 */
.wrapper {
display: grid;
grid-template-rows: 0fr; /* 折叠状态 */
transition: grid-template-rows 0.3s ease;
overflow: hidden;
}
.wrapper.open {
grid-template-rows: 1fr; /* 展开 */
}
.content {
min-height: 0; /* 必须的，否则grid不生效 */
}
/* 或者用max-height技巧 */
.smooth-accordion {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.smooth-accordion.open {
max-height: var(--content-height, 1000px); /* JS动态计算后设置CSS变量 */
}
JS计算高度：
function smoothToggle(element) {
if (element.classList.contains('open')) {
element.style.maxHeight = '0px';
element.classList.remove('open');
} else {
element.classList.add('open');
// 关键：先获取scrollHeight
const height = element.scrollHeight;
element.style.setProperty('--content-height', `${height}px`);
element.style.maxHeight = `${height}px`;
}
}
坑五：SEO 翻车现场
如果你用display: none或visibility: hidden来藏关键词，被搜索引擎抓到会认为你在作弊（cloaking）。但如果是为了用户体验，比如tab切换内容，那是没问题的。
关键区别：
- 合法隐藏：移动端菜单默认折叠、模态框、轮播图非当前页
- 作弊隐藏：把关键字堆在隐藏div里想骗排名
搜索引擎现在能执行JS了，所以用JS动态加hidden属性也是一样的。老老实实做内容比啥都强。
实战：五种方法做个侧边栏
光说不练假把式，咱们用这五种方法各实现一次侧边栏切换，看看区别。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侧边栏隐藏大比拼</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
display: flex;
min-height: 100vh;
}
/* 基准样式 */
.sidebar {
width: 250px;
background: #2c3e50;
color: white;
padding: 20px;
flex-shrink: 0;
}
.main {
flex: 1;
padding: 20px;
background: #ecf0f1;
}
.toggle-btn {
margin-bottom: 10px;
padding: 10px 20px;
background: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.toggle-btn:hover { background: #2980b9; }
/* 方案1: display none - 生硬版 */
.sidebar.display-hide {
display: none;
}
/* 方案2: visibility - 占位版 */
.sidebar.visibility-hide {
visibility: hidden;
width: 0; /* 配合width实现空间回收，但不支持过渡 */
padding: 0;
overflow: hidden;
opacity: 0;
transition: all 0.3s ease; /* 其实只opacity和width能过，visibility还是跳 */
}
/* 方案3: transform - 丝滑版 */
.sidebar.transform-hide {
transform: translateX(-100%);
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* 注意：这里sidebar还在文档流里，只是跑了 */
margin-left: -250px; /* 补一刀，把空间也收了 */
}
/* 方案4: max-width - 弹性版 */
.sidebar.maxwidth-hide {
max-width: 0;
opacity: 0;
padding: 0;
overflow: hidden;
transition: all 0.3s ease;
white-space: nowrap; /* 防止内容换行使高度变高 */
}
/* 方案5: grid 布局 - 现代版 */
.container {
display: grid;
grid-template-columns: auto 1fr;
transition: grid-template-columns 0.3s ease;
}
.container.grid-hide {
grid-template-columns: 0px 1fr;
}
.container.grid-hide .sidebar {
opacity: 0;
overflow: hidden;
transition: opacity 0.3s;
}
/* 性能优化：will-change */
.will-change-transform {
will-change: transform, opacity;
}
</style>
</head>
<body>
<div class="container" id="container">
<aside class="sidebar" id="sidebar">
<h3>我是侧边栏</h3>
<p>试试各种隐藏方式</p>
<nav>
<a href="#" style="color: white; display: block; padding: 10px 0;">Home</a>
<a href="#" style="color: white; display: block; padding: 10px 0;">About</a>
<a href="#" style="color: white; display: block; padding: 10px 0;">Contact</a>
</nav>
</aside>
<main class="main">
<h1>CSS 隐藏方法测试场</h1>
<p>点击按钮看效果，打开控制台看Performance</p>
<div style="margin-top: 20px;">
<button class="toggle-btn" onclick="toggle('display')">display: none（生硬）</button>
<button class="toggle-btn" onclick="toggle('visibility')">visibility（占位的鬼）</button>
<button class="toggle-btn" onclick="toggle('transform')">transform+margin（最丝滑）</button>
<button class="toggle-btn" onclick="toggle('maxwidth')">max-width（白色渐隐）</button>
<button class="toggle-btn" onclick="toggle('grid')">grid 布局（未来已来）</button>
</div>
<div id="status" style="margin-top: 20px; padding: 10px; background: #dff0d8; border-radius: 4px;">
当前状态：显示中
</div>
</main>
</div>
<script>
const sidebar = document.getElementById('sidebar');
const container = document.getElementById('container');
const status = document.getElementById('status');
let currentMode = '';
function clearClasses() {
sidebar.className = 'sidebar';
container.className = 'container';
// 强制重绘，避免类名冲突
void sidebar.offsetWidth;
}
function toggle(mode) {
clearClasses();
currentMode = mode;
switch(mode) {
case 'display':
sidebar.classList.add('display-hide');
status.textContent = '当前：display: none - 直接从渲染树移除，无动画，回流最大';
break;
case 'visibility':
sidebar.classList.add('visibility-hide');
status.textContent = '当前：visibility: hidden - 占位但不可见，支持透明度过渡但空间回收生硬';
break;
case 'transform':
sidebar.classList.add('transform-hide', 'will-change-transform');
status.textContent = '当前：transform: translateX - GPU加速最流畅，需配合margin回收空间';
break;
case 'maxwidth':
sidebar.classList.add('maxwidth-hide');
status.textContent = '当前：max-width: 0 - 仅适用于定宽场景，动画自然但有性能开销';
break;
case 'grid':
container.classList.add('grid-hide');
sidebar.style.transition = 'opacity 0.3s'; // JS控制额外过渡
status.textContent = '当前：grid-template-columns - 未来最佳方案，动画自然且符合语义';
break;
}
// 测试可访问性：打印隐藏状态
console.log('Hidden?' , sidebar.matches('[class*="-hide"]'));
console.log('占用空间？', sidebar.getBoundingClientRect().width);
}
// 监听过渡结束事件
sidebar.addEventListener('transitionend', (e) => {
console.log('过渡完成:', e.propertyName);
});
// 性能监测：看看是否触发Layout
if (window.PerformanceObserver) {
const perfObserver = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.entryType === 'layout-shift' && entry.value > 0) {
console.warn('发生布局偏移(LS):', entry.value);
}
}
});
perfObserver.observe({ entryTypes: ['layout-shift'] });
}
</script>
</body>
</html>
上面这段代码可以直接保存成HTML打开看效果。明显能感觉到，transform方案最丝滑，因为启用了GPU加速；grid方案最现代，但兼容性要注意；max-width方案在内容不确定高度时可能有bug。
什么时候用什么？一张表说清
说了这么多，记不住？直接上决策树：
要动画效果？
- 用
opacity+transform组合拳，性能最好 - 或者
grid-template-rows/columns做尺寸动画
要彻底移除不占空间？
display: none，简单粗暴- 但注意子元素的transition会失效
要占位（比如骨架屏）？
visibility: hidden，还能控制延迟- 配合
opacity做淡出
要考虑无障碍（读屏软件）？
- 用上面的
<-URL->类那种剪裁方案 - 或者用
aria-hidden+inert属性
要做响应式？
- 移动端某些元素藏着，桌面端显示？
- 用
hidden属性配合media query：
@media (max-width: 768px) {
.desktop-only {
display: none;
}
}
@media (min-width: 769px) {
.mobile-only {
display: none;
}
}
SEO敏感区域？
- 正文内容藏了给爬虫看？别作死，Google能看出来
- 导航菜单藏了没事，这是正常UX
移动端隐藏的特殊注意
手机上坑更多。iOS Safari和Chrome for Android对position: fixed的处理就不一样。
/* 移动端不要用这个，会导致fixed定位失效 */
.mobile-bad {
transform: translateX(-100%); /* 在iOS上可能让fixed子元素相对于这个位移 */
}
/* 解决：用wrapper包一层，transform加在wrapper上 */
.mobile-good-wrapper {
transform: translateX(-100%);
}
.mobile-good-content {
/* 子元素保持static或relative */
}
还有，移动端虚拟键盘弹起时，用position: absolute踢出屏幕的元素可能会被键盘"顶上来看看"，特别是在安卓上。这时候用display: none或visibility: hidden更稳妥。
// 检测键盘弹起，调整隐藏策略
window.addEventListener('resize', () => {
const isKeyboardOpen = window.innerHeight < originalHeight * 0.75;
const hiddenElements = document.querySelectorAll('.off-screen');
hiddenElements.forEach(el => {
if (isKeyboardOpen) {
// 键盘打开时，改用更安全的隐藏方式
el.style.display = 'none';
} else {
el.style.display = '';
}
});
});
排查技巧：明明藏了为啥还占地方？
遇到这种问题时，别慌，按这个顺序查：
- 检查computed样式：右键检查元素，看Computed面板里的
display、visibility、opacity到底是啥 - 看看伪元素：
::before或::after可能没藏，看起来像是父元素还在 - 检查子元素：子元素fixed定位会跳出父元素约束，藏在父元素里没用
- 看层叠上下文：
transform或opacity可能创建了新的stacking context，z-index表现异常 - 动画未完成：过渡动画还在跑，虽然你看不见过程，但浏览器还在计算中间状态
// 调试神器：暴力显示所有隐藏元素
function debugHiddenElements() {
const allElements = document.querySelectorAll('*');
allElements.forEach(el => {
const style = window.getComputedStyle(el);
if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
el.style.outline = '3px solid red';
el.title = `Hidden by: ${style.display === 'none' ? 'display' : style.visibility === 'hidden' ? 'visibility' : 'opacity'}`;
console.log('Hidden element:', el, {
display: style.display,
visibility: style.visibility,
opacity: style.opacity,
rect: el.getBoundingClientRect()
});
}
});
}
把这段代码复制到控制台运行，所有隐藏元素都会标红，一目了然。
最后唠叨两句
其实CSS隐藏这事儿，没有银弹。每种方法都是权衡，你要在性能、体验、可维护性之间找平衡。
我个人现在的习惯是：
- 常规切换：用
display: none配合hidden属性，语义最好 - 需要动画：上
opacity+transform，性能最优 - 要兼顾无障碍：写个
.visually-hidden工具类，专门给读屏软件用 - 响应式：用
hidden属性，HTML5原生支持，比CSS类干净
别老是left: -9999px了，那是IE6时代的做法，现在2024年了（好吧马上2025了），浏览器都更新多少代了，咱也得与时俱进。
还有，藏元素之前多想想：真的需要藏吗？ 有时候条件渲染（React的{condition && <Component />}）或者v-if/v-show比CSS隐藏更合理。DOM节点少了，内存省了，页面快了，用户开心了，老板满意了，你加薪了…（想太多）
行，就聊到这儿吧。代码复制过去用的时候自己改改颜色字体，别直接贴上去然后跟我说丑。有问题自己在控制台里调，调不出来就…就再读一遍这篇文章呗。
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
推荐：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等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
扫一扫
2660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
