display none？ display 属性的使用方法
大家好，感谢邀请，今天来为大家分享一下display none的问题，以及和 display 属性的使用方法的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
style中display:none与visible:hidder的区别
一、
web页面前台编码时经常用到display:none样式，平常使用时发现有几点特征需要注意
1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。
2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。
3、如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题
4、有些情况下可以使用style.visibility来代替style.display，但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间，而style.display隐藏元素且让出所占页面空间。
二、
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:
display:none---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden---使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
例子：
<html>
<head>
<title>display:none和visible:hidden的区别</title>
</head>
<body>
<span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br/>
<span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>
</body>
</html>
display:none和visibility:hidden的区别
visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。
display: none----将元素的显示设为无，即在网页中不占任何的位置。
例如有三个table，将中间的一个table hidden掉，你会发现在那个被hidden的table看不见了，但是，中间会留有很大的一空白，而这个空白就是这个table没有被隐藏时所占的位置
而none的作用更像是把元素从网页中“去除”（当然不是真的去除，只是效果是如此）
例如有三个table，将中间的一个table none掉，你会发现在剩下的两个table中间不会有任何的空白。就好像中间的那个table从来不存在过一样
如何用css设置元素隐藏与显示display none block
通过CSS的display属性设置元素隐藏与显示，核心方法是使用display: none隐藏元素，display: block（或其他合适值）显示元素，并可结合JavaScript实现动态切换。具体操作如下：
1.使用display: none隐藏元素将元素的display属性设置为none，元素会从页面布局中完全移除，不占据任何空间，且无法通过交互（如点击）触发事件。
示例：.hidden-element{ display: none;}<div class="hidden-element">这段内容将被隐藏</div>效果：页面中不会显示该div，且其他元素会重新排列填补其位置。2.使用display: block显示元素若元素原本被隐藏（如通过display: none），可通过设置display: block（或其他适合的显示值，如inline、flex等）重新显示。block会使元素以块级形式显示，独占一行。
示例：.visible-element{ display: block;}<div class="visible-element">这段内容将显示为块级元素</div>适用场景：恢复隐藏的块级元素（如div、p等）。若元素原本是内联元素（如span），需改为display: inline。3.结合JavaScript动态切换显隐状态通过JavaScript监听事件（如点击按钮），动态修改元素的display属性，实现交互式显隐效果。
示例代码：<div id="target">这是一段可切换显示的内容</div><button onclick="toggleDisplay()">切换显示</button><script> function toggleDisplay(){ const element= document.getElementById('target'); if(element.style.display==='none'){ element.style.display='block';//恢复显示} else{ element.style.display='none';//隐藏}}</script>优化建议：初始状态可通过CSS设置（如.target{ display: none;}），避免JavaScript未加载时显示异常。
使用类名切换（而非直接修改style）更易维护：function toggleDisplay(){ const element= document.getElementById('target'); element.classList.toggle('hidden');//假设.hidden{ display: none;}}
4.注意事项display: none vs visibility: hidden：display: none：完全移除元素，不占空间。
visibility: hidden：元素隐藏但仍占空间，且可能保留交互事件（如点击）。
恢复显示时的值选择：块级元素（如div、section）用block。
内联元素（如span、a）用inline。
弹性布局元素用flex，表格单元格用table-cell等。
性能影响：频繁切换display可能触发重排（Reflow），影响性能。若需高频切换，可考虑opacity: 0+ pointer-events: none（元素透明且不可交互，但仍占空间）。5.完整示例<!DOCTYPE html><html><head><style>.box{ width: 200px; height: 100px; background: lightblue; margin: 10px 0;}.hidden{ display: none;}</style></head><body><div id="box1" class="box">盒子1（可隐藏）</div><button onclick="toggleBox()">切换盒子1的显示</button><script> function toggleBox(){ const box= document.getElementById('box1'); box.classList.toggle('hidden');}</script></body></html>效果：点击按钮时，box1会在显示与隐藏间切换，且不占用空间。
通过掌握display属性的切换，可灵活控制页面元素的显隐，结合JavaScript实现动态交互效果。
display none的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于 display 属性的使用方法、display none的信息别忘了在本站进行查找哦。