本篇内容主要讲解“CSS中display属性的用法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS中display属性的用法”吧!
CSS中display属性使用
visibility属性隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。
实际上你可以设置<span>的display:block,使其可以像<div>一样工作。将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。***是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填充。下面看实例的代码和效果:
例:
<scriptlanguagescriptlanguage="JavaScript"> functiontoggleDisplay(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> <div>在<spanidspanid="blueText"onclick="toggleDisplay(this)" style="color:blue;position:relative;cursor:hand;"> 蓝色</span>文字上点击来查看效果.</div>
到此,相信大家对“CSS中display属性的用法”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。