探讨一下如何在 CSS 3 中让元素消失有哪些方式达成该效果？

发布时间：2023-08-18 14:30:53 所属栏目：语言来源：

导读： 这篇文章给大家分享的是CSS3中如何将元素设置为隐藏。小编觉得挺实用的，因此分享给大家做个参考，文中介绍了四种方法，示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

本

  这篇文章给大家分享的是CSS3中如何将元素设置为隐藏。小编觉得挺实用的，因此分享给大家做个参考，文中介绍了四种方法，示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

    本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。

    在css中，有四种方法来设置元素隐藏效果。

    1、display属性可设置元素不占据原位置隐藏

    display 属性规定元素应该生成的框的类型。属性值为none时此元素不会被显示。

    示例如下：

<html>

<head>

<style type="text/css">

p {display: inline}

div {display: none}

</style>

</head>

<body>

<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而 div 元素不会显示出来！</p>

<div>div 元素的内容不会显示出来！</div>

</body>

</html>

    2、visibility属性可设置元素占据原位置隐藏

    visibility 属性规定元素是否可见。这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。

    示例如下：

<html>

<head>

<style type="text/css">

h1.visible {visibility:visible}

h1.invisible {visibility:hidden}

</style>

</head>

<body>

<h1 class="visible">这是可见的标题</h1>

<h1 class="invisible">这是不可见的标题</h1>

</body>

</html>

    输出结果：

    3、overflow属性可设置超出元素框隐藏

    overflow 属性规定当内容溢出元素框时发生的事情。当属性值为hidden时，内容会被修剪，并且其余内容是不可见的。

    示例如下：

<html>

<head>

<style type="text/css">

div

{

background-color:#00FFFF;

width:150px;

height:150px;

overflow: hidden;

}

</style>

</head>

<body>

<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<div>

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。

因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。

</div>

</body>

</html>

    4、opacity可设置元素透明隐藏

    opacity 属性设置元素的不透明级别。

    示例如下：

<html>

<head>

<style>

.div1{

background-color:red;

opacity:0.5;

filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */

}

.div2{

opacity:0;

}

</style>

</head>

<body>

<div class="div1">本元素的不透明度是 0.5。请注意，文本和背景色都受到不透明级别的影响。</div>

<div class="div2">本元素的不透明度是 0。请注意，文本和背景色都受到不透明级别的影响。</div>

</body>

</html>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!