CSS3中如何将元素设置为隐藏,都有哪些方法�

Admin 2022-02-11 群英技术资� 120 次浏�

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

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

    css3显示隐藏特效代码是什�

    在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>

    输出结果�

    关于CSS3中将元素设置为隐藏的方法就介绍到这,上述方法及示例具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助,想要了解更多大家可以关注群英网络其它的相关文章�

文本转载自PHP中文�

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部