怎么新建MySQL数据库
阅读：312
这篇文章给大家分享的是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中文网
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理