甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

CSS中display属性的妙用

本节向大家介绍一下CSS中的display属性的用法，当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像

元素一样，它会在那个点被放入到页面中。

创新互联公司2013年至今，是专业互联网技术服务公司，拥有项目网站制作、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元凉城做网站,已为上家服务,为凉城各地企业和个人服务,联系电话:028-86922220

CSS中display属性使用

visibility属性隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像

元素一样，它会在那个点被放入到页面中。

实际上你可以设置的display:block，使其可以像

一样工作。将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如
，它也将会被组合成像那样的输出流。***是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。下面看实例的代码和效果：

例：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2. functiontoggleDisplay(me){  
    3. 
  
  
  
  3. if(me.style.display=="block"){  
    4. 
  
  
  
  4. me.style.display="inline";  
    5. 
  
  
  
  5. alert("文本现在是：'inline'.");  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8. else{  
    9. 
  
  
  
  9. if(me.style.display=="inline"){  
    10. 
  
  
  
  10. me.style.display="none";  
    11. 
  
  
  
  11. alert("文本现在是:'none'.3秒钟后自动重新显示。");  
    12. 
  
  
  
  12. window.setTimeout("blueText.style.display='block';",  
    13. 
  
  
  
  13. 3000,"JavaScript");  
    14. 
  
  
  
  14. }  
    15. 
  
  
  
  15. else{  
    16. 
  
  
  
  16. me.style.display="block";  
    17. 
  
  
  
  17. alert("文本现在是:'block'.");  
    18. 
  
  
  
  18. }  
    19. 
  
  
  
  19. }  
    20. 
  
  
  
  20. }  
    21. 
  
  
  
  21.  
    22. 
  
  
  
  22.  
    23. 
  
  
  
  23. 在
  
  
  
  24. style="color:blue;position:relative;cursor:hand;"> 
    25. 
  
  
  
  25. 蓝色文字上点击来查看效果.
 

【编辑推荐】

  1. clear属性在CSS中的妙用
  2. 五大CSS3新技术用法指导
  3. 专家提醒 编写CSS时注意的七个方面
  4. 实例解析CSS DIV绝对定位与固定定位用法
  5. 解读DIV CSS网页布局中CSS无效十个原因

文章标题：CSS中display属性的妙用
标题链接：https://chengdu.cdxwcx.cn/article/djjpdhp.html

其他资讯