这段时间一直对display属性的block,inline,none和visibility属性的visible，hidden一直很模糊，总觉得很难理解，通过下面这个实例，就可以很好的牢记这几者之间的区别。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1>
<P><SPAN id="oSpan" style="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P>
<P>
<input type=button value="Inline" onclick="oSpan.style.display='inline'">
<input type=button value="Block" onclick="oSpan.style.display='block'">
<input type=button value="None" onclick="oSpan.style.display='none'">
<input type=button value="Hidden" onclick="oSpan.style.visibility='hidden'"><input type=button value="Visible" onclick="oSpan.style.visibility='visible'">
</P>
<UL>
<LI>将元素设为 block，会在该元素后换行。</LI>
<LI>将元素设为 inline，会消除元素换行。</LI>
<LI>将元素设为 none，隐藏该元素内容。</LI>
</UL>
</body>
</html>
打开该html页面,显示如下图：
点击Inline,Block,None,Hidden,Visible按钮，将会出现不同的结果，如下：
通过对比以上的显示，可以对display属性的block,inline,none和visibility属性的visible，hidden一目了然！
分享到：
相关推荐
`visibility:hidden` 和 `display:none` 的主要区别在于，前者隐藏元素的同时保留其占据的空间，而后者则完全从布局中移除元素。这种差异在处理页面布局时尤为关键。例如，如果一个元素的 `display` 被设置为 `none`...
- 第二个`span`通过`toggleDisplay`函数来切换`display`属性，演示了元素如何在不同的显示模式之间切换，包括从`block`到`inline`再到`none`。 #### 总结 - **`display`**：用于控制元素是否在页面上显示以及如何...
在网页布局和样式设计中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们都能用来控制元素的可见性，但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别，并通过示例来具体说明。 首先，`...
在CSS中，`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态，但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值： 1. `block`：将元素转换为...
2. **临时修改样式**：将元素的 `display` 设置为 `block` 或 `inline-block`，或者将 `visibility` 设置为 `hidden`。 3. **获取尺寸**：使用 `.offsetWidth`、`.offsetHeight` 或 `getBoundingClientRect()` 来...
相比之下，`display`属性更为复杂，它的值包括但不限于`none`（元素不可见且不占用空间）、`block`（使元素表现为块级元素，通常独占一行）和`inline`（使元素表现为行内元素，不独占一行）。`display:none`时，元素...
常见的`display`值包括`none`（元素不可见且不占用任何空间）、`block`（元素表现为块级元素，通常独占一行）、以及`inline`（元素表现为行内元素，不独立占行）。设置`display`为`none`后，元素从页面布局中完全...
此外，`display` 还有更多可选值，例如 `inline-block`、`list-item`、`table-header-group` 和 `table-footer-group` 等，这些值分别对应不同的元素显示模式，可以用来创建复杂的布局和表格结构。 总结来说，`...
常见的display属性值有block、inline和none。设置为block的元素会作为块级元素显示，通常表现为独占一行。而设置为inline的元素则表现为行内元素，它和其他行内元素一起在行内显示，不会独占一行。当display属性设置...
为了实现这一功能，CSS提供了display和visibility两个属性，它们可以控制元素是否显示，但是它们的工作原理和影响效果有所不同。 ### display属性 display属性用于设置HTML元素的显示方式。它有多种可能的值，比如...
在CSS中，`display`和`visibility`两个属性都是用于控制元素的可见性，但它们之间存在着本质的区别。首先，`visibility`属性主要用于决定元素是否可见，而不改变元素的布局。当`visibility`设置为`hidden`时，元素的...
要再次显示该元素，只需将其`display`属性设置回原来的值（通常是`block`、`inline`、`flex`等，取决于元素的原始布局）： ```javascript document.getElementById('myElement').style.display = 'block'; ``` ...
如果 `display` 是 "none"，则设置为 ""（即默认值，通常是 "block" 或 "inline"），使得元素可见；反之，如果 `display` 不是 "none"，则设置为 "none" 以隐藏元素。你可以将这个函数应用到任何具有 `id` 属性的 ...
在CSS中，`visibility` 和 `display` 都是用来控制元素在页面上的显示状态，但它们之间存在着重要的区别。理解这些差异对于精确地控制网页布局和交互至关重要。 首先，`visibility` 属性主要用来切换元素的可见性。...
CSS 高级技巧与用户界面样式 CSS 高级技巧中，元素的显示与隐藏是非常重要的，它可以让一个元素在页面中消失或者显示出来。... 一、元素的显示与隐藏 ...给 img 添加 display:inline-block; 让图片变成行内块元素。
两者的区别在于，`display`会影响元素的布局，当设置为`"none"`时，元素不仅不可见，而且不占用任何空间；而`visibility`仅使元素不可见，但其占据的空间仍存在。 1. 使用`style.display`： 要隐藏input框，可以...
`display`属性用于定义元素的类型及布局方式，它比`visibility`更为常用，因为它不仅可以控制元素的显示与隐藏，还能改变元素的类型（例如，将其从块级元素变为内联元素）。 1. **none**：元素完全不显示，也不保留...