CSS中如何使用display属性

发布时间:2021-07-09 16:22:00 作者:Leah
来源:亿速云 阅读:146

CSS中如何使用display属性,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

实例解析CSS中display属性使用

display属性:

display是CSS重要的一个属性,主要设置元素的浮动和显示的特征,有以下几个参数:

◆block:

当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<div>一样工作。

◆inline:

将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。

◆none:

***是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填充。

您可以测试一下代码查看display的效果:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <!--www.Csscss.orgCSS在线--> <head> <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> </head> <body> <div>在<spanidspanid="blueText"onclick_fckprotectedatt="%20onclick%3D%22toggleDisplay(this)%22"  style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效果.</div> <br/><br/> <ahrefahref=http://www.CssCss.org_fcksavedurl="http://www.CssCss.org"  _fcksavedurl="http://www.CssCss.org" _fcksavedurl="http://www.CssCss.org"target="_blank">Css在线</a> </body> </html>

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

推荐阅读:
  1. 怎么使用css中display属性
  2. css display属性如何使用

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

display css

上一篇:nodejs如何结合socket.io实现websocket通信功能

下一篇:nodejs如何结合Socket.IO实现的即时通讯功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》