<!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>
<LI>将元素设为 Visibility:hidden，隐藏该元素内容。但在页面上保留该元素的空间。</LI>
<LI>将元素设为 Visibility:visible，元素可见。</LI>
</UL>
<ul>
<li>
visibility: visible<br/>
/* 元素可见，默认值 */<br/>
visibility: hidden
/* 元素不可见，但仍然为其保留相应的空间 */<br/>
visibility: collapse<br/>
/* 只对 table 对象起作用，能移除行或列但不会影响表格的布局。如果这个值用在 table 以外的对象上则表现为 hidden 。 */<br/>
visibility: inherit<br/>
/* 继承上级元素的 visibility 值。 */<br/>
</li>
</ul>
<ul>
<li>
display: none<br/>
/* 元素不可见，并且不为其保留相应的位置 */<br/>
display: block<br/>
/* 表现为一个块级元素（一般情况下独占一行） */<br/>
display: inline<br/>
/* 表现为一个行级元素（一般情况下不独占一行） */<br/>
</li>
</ul>
</body>
</html>
以上内容非原创，都是从别人的站点上东拼西凑，记录下来的。
在此感谢上述相关内容的原创者！
分享到：
相关推荐
在CSS中，隐藏元素的方法主要有三种：`display:none`、`visibility:hidden`和`opacity:0`，它们各自有不同的特点和适用场景。 1. `display:none`：此属性会使元素完全从页面布局中消失，不占据任何空间。元素及其...
大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。 visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，...
`display` 属性是CSS中不可或缺的一部分，它对网页布局起着至关重要的作用。通过`display`属性，我们可以控制HTML元素的显示方式，从而实现各种复杂的布局效果。下面我们将深入探讨`display`属性的原理、用途及其...
在网页设计和开发中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们用于控制元素在页面上的可见性和布局。这篇博客文章通过代码示例深入探讨了这两个属性的区别和用法。 首先，`display` 属性主要用于...
display与visibility的区别 `display`属性控制元素是否显示，而`visibility`属性则决定元素是否可见。两者的区别在于： - **使用display隐藏**: `display: none;` - **使用visibility隐藏**: `visibility: hidden;...
在CSS中，`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态，但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值： 1. `block`：将元素转换为...
- `display`：定义元素的显示方式，如block、inline、inline-block、flex、grid、none等。 - `overflow`：定义元素内容溢出时的处理方式，如visible、hidden、scroll、auto。 - `visibility`：定义元素是否可见，如...
CSS中display和visibility属性都是用于控制页面元素的显示与隐藏的，但是它们在实现方式和效果上有本质的区别。理解这两个属性的不同对于Web前端开发至关重要，尤其是在进行动态网页制作时，合理使用这些属性能够更...
CSS 高级技巧与用户界面样式 CSS 高级技巧中，元素的显示与隐藏是非常重要的，它可以让一个元素在页面中消失或者显示出来。场景类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。 一、...
CSS中用于隐藏元素的方式之一，如`display:none`或`visibility:hidden`。 - **Head**: 头部。HTML文档的头部部分，由`<head>`标签包裹。 - **Home**: 首页。网站的第一个页面或主要页面，通常是网站入口。 - **...
常见的显示与隐藏属性有 `display`、`visibility` 和 `overflow`。 1.1 `display` 属性 `display` 属性设置或检索对象是否及如何显示。它的特点是隐藏之后，不再保留位置。实际开发场景中，`display` 属性常用于...
- 定义元素内部与内容之间的空间。 #### 五、边框属性（Border Properties） 边框属性用于设置元素边框的样式： 1. **样式** (`border-style`) - `dotted`: 点线。 - `dashed`: 虚线。 - `solid`: 实线。 - ...
总之，`visibility`和`display`在CSS中扮演着不同的角色，`visibility`关注的是元素的可见状态，而`display`则涉及元素在布局中的存在状态。了解它们的差异并合理运用，可以帮助我们更好地控制网页的显示效果和用户...
.imgbox { float:left; text-align:center; width:120px;...CSS Display(显示) 与 Visibility（可见性） display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。 Box 1 Box
display: inline-block; padding: 10px; background-color: #f0f0f0; border: none; cursor: pointer; } /* 复选框样式 */ .chkbox { visibility: hidden; /* 隐藏实际的复选框 */ } .chkbox:checked + .btn...
在网页布局和样式设计中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们都能用来控制元素的可见性，但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别，并通过示例来具体说明。 首先，`...
总的来说，`visibility`和`display`都是CSS中强大的工具，用于控制元素的可见性和布局。理解它们的区别并正确使用，可以让你在创建网页时更加灵活，同时也能避免可能对SEO产生的负面影响。在实际工作中，开发者应...
在CSS中，`display`和`visibility`两个属性都是用于控制元素的可见性，但它们之间存在着本质的区别。首先，`visibility`属性主要用于决定元素是否可见，而不改变元素的布局。当`visibility`设置为`hidden`时，元素的...