html display属性与visibility属性与两者隐藏元素的区别

HTML 中有多种 display 属性，它们用来控制元素的显示方式。常用的 display 属性值及其作用如下：

1. block：将元素显示为块级元素，即一个元素占据整个父容器的宽度并独占一行。
2. inline：将元素显示为行内元素，即元素仅占据它的实际宽度，不会独占一行，可以和其他行内元素在同一行。
3. inline-block：将元素显示为行内块级元素，即元素会占据它的实际宽度和高度，但是不会独占一行，可以和其他行内元素在同一行。
4. none：将元素隐藏，即不占据空间，并且不会被屏幕阅读器和搜索引擎检索。
5. flex：将元素显示为弹性盒子，即可以通过 flex 属性控制元素的位置和大小。
6. grid：将元素显示为网格盒子，即可以通过 grid 属性控制元素的位置和大小。
7. table、table-row、table-cell：将元素显示为表格或表格单元格。

HTML 中的 visibility 属性用于控制元素的可见性，从而影响元素在页面中的显示状态。visibility 属性的取值包括以下三种：

1. visible（默认值）：元素可见，如果父元素或祖先元素具有 hidden 属性，则不会覆盖该属性。
2. hidden：元素不可见，但仍占据页面上的空间。
3. collapse：仅适用于表格行元素（tr），表示折叠该行的边框和内部元素，但不会从表格中移除该行，因此仍会占据页面上的空间。

两者的区别

通过设置 visibility 属性，可以对网页中的元素进行隐藏或显示操作，同时保留其在网页布局中的占位。注意，当元素的 display 属性值为 none 时，元素不仅不可见，同时也不占据页面上的空间。

	
	


	
Display vs visibility
	
点击下面的按钮可以切换两个元素的显示或隐藏状态：
	Toggle display
	Toggle visibility
	

		
Box 1
		
Box 2
	

	

通过点击页面中的两个按钮，我们可以切换盒子的隐藏或不可见状态。可以看到，当我们将元素的 display 属性设置为 none 时，它们不仅被隐藏了，而且元素所占用的空间也消失了，不再占据页面布局空间。而当我们将元素的 visibility 属性设置为 hidden 时，元素仍然占据页面上的空间，只是不显示而已，不会对页面布局产生影响。