css中控制元素显示与隐藏主要通过display、visibility和opacity属性实现。display: none完全移除元素且不占空间，会触发重排；visibility: hidden仅隐藏元素但仍占空间，只触发重绘；opacity: 0使元素透明但可交互，常用于过渡效果。使用javascript可通过修改样式或切换类名动态控制，推荐用类名管理以提升性能。淡入淡出效果通常结合opacity与transition实现，若需精确控制布局变化，可配合visibility延迟切换。选择方法应根据是否需保留空间、是否响应事件及是否需要动画效果来决定。
CSS控制元素显示隐藏，主要通过
display和
visibility属性来实现。
display会直接影响元素的布局，而
visibility只是让元素不可见，但仍占据空间。
display: none和
visibility: hidden是最常用的两种方式，但它们之间有显著区别。
CSS控制元素显示隐藏技巧：
如何使用
display属性控制元素的显示与隐藏？
display属性是CSS中控制元素布局的最强大工具之一。它不仅可以隐藏元素，还可以改变元素的类型，例如将行内元素变为块级元素，反之亦然。
-
display: none;
：完全从文档流中移除元素，不占据任何空间。这意味着页面布局会像元素不存在一样重新计算。这个方法适用于完全隐藏元素，并且不希望它影响页面布局。.hidden-element { display: none; } -
display: block;
：将元素显示为块级元素，占据父元素的整个宽度，并在前后创建换行。.block-element { display: block; } -
display: inline;
：将元素显示为行内元素，只占据它内容所需的宽度，并且不会创建换行。.inline-element { display: inline; } -
display: inline-block;
：将元素显示为行内块级元素，既可以像行内元素一样在一行显示，又可以像块级元素一样设置宽度和高度。.inline-block-element { display: inline-block; width: 100px; height: 50px; } -
display: flex;
和display: grid;
：用于创建弹性盒子布局和网格布局，可以更灵活地控制元素的排列和对齐方式。这些属性通常用于更复杂的布局场景。.flex-container { display: flex; } .grid-container { display: grid; }
display属性的变化会触发浏览器的重排（reflow）和重绘（repaint），特别是从
none变为其他值时。频繁地改变
display属性可能会影响性能，所以要谨慎使用。
visibility: hidden和
display: none的区别是什么？
visibility属性控制元素的可见性，而
display属性控制元素的显示方式和布局。
visibility: hidden会隐藏元素，但元素仍然占据其原始空间，而
display: none会完全从文档流中移除元素，不占据任何空间。
-
visibility: hidden;
：隐藏元素，但元素仍然占据其原始空间。这意味着页面布局不会改变，只是元素不可见。.invisible-element { visibility: hidden; } -
visibility: visible;
：显示元素，这是visibility
属性的默认值。.visible-element { visibility: visible; } -
visibility: collapse;
：在表格元素中使用，可以隐藏行或列，并且不占据空间。这与display: none
类似，但只适用于表格元素。tr { visibility: collapse; /* 隐藏表格行 */ }
visibility: hidden的性能通常比
display: none更好，因为它不会触发重排，只会触发重绘。因此，如果只是想隐藏元素而不影响布局，建议使用
visibility: hidden。
如何使用JavaScript动态控制元素的显示与隐藏？
JavaScript可以动态地改变元素的
display和
visibility属性，从而实现元素的显示与隐藏。这在交互式Web应用中非常常见，例如在用户点击按钮后显示或隐藏某个元素。
-
使用
ApiPost接口调试与文档生成工具下载ApiPost是一个支持团队协作，支持模拟POST、GET、PUT等常见请求，并可直接生成文档的API调试、管理工具，ApiPost是后台接口开发者或前端、接口测试人员的工作必备工具。快速生成、一键导出API文档。感兴趣的朋友快来下载吧。软件说明ApiPost官方版是一款十分出色的接口调试与文档生成工具，ApiPost官方版界面美观大方，功能强劲实用，支持团队协作，支持模拟POST、GET、PUT等常见请求，是后台接口开发者或前端、接口测试人员的工作必备工具。软件特色更方便支持接口调试的同时快速生成、一键
display
属性：const element = document.getElementById('myElement'); // 隐藏元素 element.style.display = 'none'; // 显示元素 element.style.display = 'block'; // 或者 'inline', 'inline-block' 等 -
使用
visibility
属性：const element = document.getElementById('myElement'); // 隐藏元素 element.style.visibility = 'hidden'; // 显示元素 element.style.visibility = 'visible'; -
使用CSS类名：
更推荐的做法是通过JavaScript添加或移除CSS类名来控制元素的显示与隐藏。这样可以更好地分离结构、样式和行为。
.hidden { display: none; }const element = document.getElementById('myElement'); // 隐藏元素 element.classList.add('hidden'); // 显示元素 element.classList.remove('hidden');
使用JavaScript动态控制元素的显示与隐藏时，需要注意性能问题。频繁地改变
display属性可能会导致页面卡顿，特别是当元素及其子元素数量较多时。在这种情况下，可以考虑使用
visibility属性或者CSS类名来优化性能。
opacity: 0也能隐藏元素，它和
visibility: hidden有什么区别？
opacity: 0也能隐藏元素，但它与
visibility: hidden之间存在一些关键区别。
-
opacity: 0;
：将元素的透明度设置为0，使其完全透明，但元素仍然占据其原始空间，并且可以响应事件。这意味着用户无法看到元素，但仍然可以点击或悬停在元素上。.transparent-element { opacity: 0; } -
visibility: hidden;
：隐藏元素，但元素仍然占据其原始空间，并且不能响应事件。这意味着用户无法看到元素，也无法与元素交互。
主要区别在于，
opacity: 0隐藏的元素仍然可以响应事件，而
visibility: hidden隐藏的元素不能。此外，
opacity属性可以创建过渡效果，使元素的显示与隐藏更加平滑。
何时应该使用
display: none，何时应该使用
visibility: hidden，何时应该使用
opacity: 0？
选择哪种方法取决于具体的需求和场景。
-
display: none;
：当需要完全从文档流中移除元素，并且不希望它影响页面布局时使用。例如，在移动设备上隐藏某个元素，或者在用户登录后隐藏注册表单。 -
visibility: hidden;
：当需要隐藏元素，但希望它仍然占据其原始空间，并且不希望影响页面布局时使用。例如，在鼠标悬停时隐藏某个元素，或者在动画过程中暂时隐藏元素。 -
opacity: 0;
：当需要隐藏元素，但希望它仍然可以响应事件，或者需要创建过渡效果时使用。例如，在鼠标悬停时逐渐显示某个元素，或者在动画过程中改变元素的透明度。
总的来说，
display: none适用于完全隐藏元素，
visibility: hidden适用于隐藏元素但不影响布局，
opacity: 0适用于隐藏元素但仍然可以响应事件。
如何实现元素的淡入淡出效果？
可以使用CSS的
transition属性和
opacity属性来实现元素的淡入淡出效果。
.fade-in-out {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.fade-in-out.visible {
opacity: 1;
}
const element = document.getElementById('myElement');
// 淡入
element.classList.add('visible');
// 淡出
element.classList.remove('visible');
在这个例子中，
.fade-in-out类定义了元素的初始透明度为0，并设置了
transition属性，指定了
opacity属性的变化需要0.5秒的时间，并且使用了
ease-in-out缓动函数。
.fade-in-out.visible类定义了元素的透明度为1，当元素添加
.visible类时，会触发淡入效果，当移除
.visible类时，会触发淡出效果。
除了
opacity属性，还可以使用
visibility属性和
transition属性来实现淡入淡出效果，但需要注意
visibility属性不能直接过渡，需要结合
opacity属性一起使用。
.fade-in-out {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out, visibility 0s 0.5s; /* visibility延迟0.5秒 */
}
.fade-in-out.visible {
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease-in-out, visibility 0s; /* visibility立即显示 */
}
在这个例子中，
visibility属性的过渡被延迟了0.5秒，这意味着在淡出效果完成后，
visibility属性才会变为
hidden，从而避免了在过渡过程中元素仍然占据空间的问题。在淡入效果开始时，
visibility属性立即变为
visible。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
