大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。
visibility属性用来确定元素是显示还是隐藏的，这用visibility=”visible|hidden”来表示（visible表示显示，hidden表示隐藏）。
当visibility被设置为”hidden”的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。例：
<script language="JavaScript"> function toggleVisibility(me)
{
if (me.style.visibility == "hidden")
{
me.style.visibility = "visible";
} else
{
me.style.visibility = "hidden";
}
} </script>
第一行文本将会触发”hidden”和”visible”属性，注意第二行的变化。< /div> < div>因为visibility会保留元素的位置，所以虽然第一行看不见了但位置还在，第二行内容不会上下移动。
注意到，当元素被隐藏之后，就不能再接收到其它事件了，所以在第一段代码中，当其被设为”hidden”的时候，就不能再接收响应到事件了，因此也就无法通过鼠标点击第一段文本令其显示出来。
另一方面，display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。
当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像< div>元素一样，它会在那个点被放入到页面中。(实际上你可以设置< span>的display:block，使其可以像< div>一样工作。
将display设置为inline，将使其行为和元素inline一样—即使它是普通的块元素如< div>，它也将会被组合成像< span>那样的输出流。
下面看我实例的代码和效果：
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
function bclick() {
document.write("<%=CsharpVoid()%>");
}
</script>
<script type="text/javascript">
function toggleDisplay(me) {
if (me.style.display == "block") {
me.style.display = "inline"; alert("文本现在是：'inline'.");
}
else {
if (me.style.display == "inline") {
me.style.display = "none";
alert("文本现在是:'none'. 3秒钟后自动重新显示。");
window.setTimeout("blueText.style.display='block';", 3000, "JavaScript");
} else {
me.style.display = "block"; alert("文本现在是:'block'.");
}
}
} </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>在
<span id="blueText" onclick="toggleDisplay(this)" style="color: blue; position: relative; cursor: hand;">蓝色
</span>文字上点击来查看效果.
</div>
</asp:Content>
运行结果
最后是display被设置：none，这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。（此时应用display: none;的元素相当于消失，而visibility: hidden;则只表示隐藏，位置还在。）
display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试示例：
<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>
下面附上本人花了2个小时解决的隐藏，显示问题：
在下拉框显示选择题时候，红色框子中的信息显示，其他选项为隐藏。
解决方案：
给需要隐藏的控件上加上一个id在下拉变化的时候，触发一段js，来出来id显示还是隐藏这样对单个保存没有问题，那么问题出现了？编辑页面的时候，刚打开来，页面是没有下来选项的，此时页面下来是用repeat绑定的。在后台页面调用编辑按钮的时候，做一下是否是选择“选择题”，是的话直接显示，将数据绑定到repeat上，若不是的话，需要构建一个空的repeat模型，同时还要隐藏该空间。 贴上分段式代码 js
function changeDD(obj) {
var chioseType = $(obj).find(
"option:selected").val();
if (chioseType ==
'Choice') {
$(
"#ContentPlaceHolder1_OperateOption").show();
}
else {
$(
"#ContentPlaceHolder1_OperateOption").hide();
}
}
服务器端代码
if (item.TopicType ==
"Choice")
{
}
else
{
Model nullModel =
new Model();
List<Model> optionList1 =
new List<Model>();
this.Repeater1.DataSource = nullModel;
this.Repeater1.DataBind();
this.OperateOption.Attributes.Add(
"Style",
"display:none");
}
https://zhidao.baidu.com/question/106645890.html
