displaynone（displaynone和visibilityhidden区别）
display:none——一个看不见的存在
作为前端开发者，我们经常使用CSS来控制页面元素的显示与隐藏。其中，display:none是最常用的一种方式，它可以完全隐藏一个元素，不占据页面空间，也不会对页面产生影响。但是，display:none也有其自身的特点和问题，本文将会逐一剖析。
一、 display:none是什么？
display:none是CSS中的一个常见属性，用于控制一个元素的显示或隐藏。当我们给一个元素设置display:none时，该元素会从页面中彻底消失，不占据任何空间，也不会触发任何事件。
二、 display:none的优缺点
1. 优点
a. 高效：display:none可以完全隐藏一个元素，避免了其占据页面空间和触发事件，从而可以提高页面的加载速度、响应速度和交互效率。
b. 稳定：display:none对页面布局和样式不会造成任何影响，因此可以稳定地控制元素的隐藏和显示。
c. 灵活：display:none可以与其他CSS属性结合使用，实现各种效果，如轮播图、模态框、菜单等。
2. 缺点
a. 可访问性：对于屏幕阅读器等辅助设备，display:none的元素是无法被访问的，这会影响用户的可访问性和使用体验。
b. SEO：对于搜索引擎来说，display:none的元素是无法被索引的，这会影响页面的搜索排名和流量。
c. 维护性：如果过度使用display:none，会使代码变得难以维护和理解，因此需要合理使用。
三、 如何使用display:none？
1. 单独使用
可以通过以下方式单独使用display:none：
```css
display: none;
```
例如，我们可以使用以下代码隐藏一个div元素：
```html
这是一个被隐藏的元素。
```
2. 结合JavaScript使用
除了CSS，我们还可以结合JavaScript使用display:none，实现更加复杂的动态效果。例如，以下代码展示了如何通过按钮控制元素的隐藏和显示：
```html
这是一个可隐藏的内容。
```
3. 结合CSS使用
display:none也可以与其他CSS属性结合使用，实现更加灵活的效果。例如，以下代码展示了如何通过:hover实现鼠标悬停时显示隐藏元素：
```css
.box {
display: none;
}
.box:hover {
display: block;
}
```
四、 总结
display:none是我们前端开发者非常常用的一个属性，可以用于控制元素的隐藏和显示。它具有高效、稳定、灵活等优点，但也存在可访问性、SEO、维护性等缺点。因此，在使用display:none时需要权衡其优缺点，合理使用，才能达到更好的效果。
display:none和visibility:hidden区别
在前端网页开发中，我们常常需要控制网页元素的显示与隐藏。两个常用的方法是：display:none和visibility:hidden。这两种方法虽然都可以隐藏元素，但它们之间还是有一定的区别的。
display:none
display:none会完全隐藏元素，元素在页面上不可见，甚至不占用任何空间，同时无法点击、无法聚焦，也不会在DOM中存在。这是一种完全不显示的隐藏方式。display:none被使用在需要动态改变显隐状态的元素上，比如下拉菜单、模态框等。
CSS语法 for display:none :
display:none;
visibility:hidden
visibility:hidden则是将元素隐藏，但它在页面上仍占有空间，只是不可见。当元素使用visibility:hidden方式隐藏时，元素的点击事件和键盘聚焦状态都是保持可用的。通过它我们可以在保持元素所占用的布局空间不变的情况下把元素隐藏。通常适用于静态不需要改变的元素。
CSS语法 for visibility:hidden :
visibility:hidden;
区别
1. display:none和visibility:hidden之间最明显的区别在于在元素是否占用布局空间的问题。display:none不会在页面上留下任何的空间，而visibility:hidden则会保留原来元素的空间。
2. 块级元素和内联元素使用display:none与visibility:hidden方式隐藏表现也不同。display:none隐藏块级元素时，下面的所有元素会被强制上移，而使用visibility:hidden隐藏后，下面的元素则不会上移。
3. 定位元素在使用display:none隐藏后，布局不会发生变化(其空位被腾出)，而使用visibility:hidden隐藏后，空间仍会被留出。
4. 例如一个按钮，如果只是需要改变样式，例如：修改颜色、修改内边距等等，此时使用visibility:hidden会更好，因为元素还可以触发一些事件，不影响功能使用。而使用display:none会使得按钮无法触发事件，并且不占据空间。
总结
display:none和visibility:hidden两种CSS属性实现元素的隐藏都是常用的方式。它们在表现上虽然非常相似，但是根据实际的开发需求，使用的情况不同。需要根据具体需求来选择其中一种方式。
此外，开发过程中需要注意区别它们的作用，以免错误地使用，导致一些奇怪的问题发生。
