display和visibility的区别_lg-visiable与无效果-优快云博客

本文链接：https://blog.youkuaiyun.com/younghaiqing/article/details/71171498

本文详细解释了CSS中display和visibility属性的区别。display属性用于控制元素的布局方式，包括block、inline和none；而visibility属性则仅控制元素的可见性，hidden使元素不可见但仍保留其空间。文章通过实例演示了两种属性的不同应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大多数人很容易将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
                        {
                        //构建repeat中空模型，并隐藏控件Attributes
                            Model nullModel = new Model();
                            List<Model> optionList1 = new List<Model>();


                            this.Repeater1.DataSource = nullModel;
                            this.Repeater1.DataBind();
                            this.OperateOption.Attributes.Add("Style", "display:none");
                        }