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>
如何用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和visibility:hidden的区别
-
数容易CSS属性displayvisibility混淆看似没同其实差别却
visibility属性用确定元素显示隐藏用visibility="visible|hidden"表示（visible表示显示hidden表示隐藏）
visibility设置"hidden"候元素虽隐藏仍占据原所位置例：
第行文本触发"hidden""visible"属性注意第二行变化 visibility保留元素位置所虽第行看见位置第二行内容移
[Ctrl+A全部选择进行拷贝提示：先修改部代码再点击运行]
注意元素隐藏能再接收其事件所第段代码其设"hidden"候能再接收响应事件通鼠标点击第段文本令其显示
另面display属性点同visibility属性隐藏元素保持元素浮位置display实际设置元素浮特征
display设置block(块)容器所元素作单独块像元素点放入页面(实际设置display:block使其像工作
display设置inline使其行元素inline---即使普通块元素组合像输流
面看我实例代码效：
蓝色文字点击查看效.
[Ctrl+A全部选择进行拷贝提示：先修改部代码再点击运行]
display设置：none元素实际页面移走面所元素自跟填（应用display: none;元素相于消失visibility: hidden;则表示隐藏位置）
display属性别block, inline, none值及使用visibility: hidden;情况调试示例：
display属性别block, inline, none值及使用visibility: hidden;情况调试 This is a SPAN in a sentence.
元素设 block该元素换行元素设 inline消除元素换行元素设 none隐藏该元素内容
OK，本文到此结束，希望对大家有所帮助。