display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style>
  7. h1.hidden {visibility:hidden;}
  8. </style>
  9. </head>
  10.  
  11. <body>
  12. <h1>这是一个可见标题</h1>
  13. <h1 class="hidden">这是一个隐藏标题</h1>
  14. <p>注意, 实例中的隐藏标题仍然占用空间。</p>
  15. </body>
  16. </html>

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style>
  7. h1.hidden {display:none;}
  8. </style>
  9. </head>
  10. <body>
  11.  
  12. <h1>这是一个可见标题</h1>
  13. <h1 class="hidden">这是一个隐藏标题</h1>
  14. <p>注意, 实例中的隐藏标题不占用空间。</p>
  15.  
  16. </body>
  17. </html>

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

  • <h1>
  • <p>
  • <div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

  • <span>
  • <a>

下面的示例把列表项显示为内联元素：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style>
  7. li{display:inline;}
  8. </style>
  9. </head>
  10. <body>
  11.  
  12. <p>链接列表水平显示：</p>
  13.  
  14. <ul>
  15. <li><a href="/html/" target="_blank">HTML</a></li>
  16. <li><a href="/css/" target="_blank">CSS</a></li>
  17. <li><a href="/js/" target="_blank">JavaScript</a></li>
  18. <li><a href="/xml/" target="_blank">XML</a></li>
  19. </ul>
  20.  
  21. </body>
  22. </html>

下面的示例把span元素作为块元素：

块元素独占一行

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <style>
  7. span
  8. {
  9.     display:block;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14.  
  15. <h2>Nirvana</h2>
  16. <span>Record: MTV Unplugged in New York</span>
  17. <span>Year: 1993</span>
  18. <h2>Radiohead</h2>
  19. <span>Record: OK Computer</span>
  20. <span>Year: 1997</span>
  21.  
  22. </body>
  23. </html>

Display(显示) 与 Visibility（可见性）的更多相关文章

  1. css中的display(显示)和visibility(可见性)

    display定义和用法 display 属性规定元素应该生成的框的类型. 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险, ...

  2. [转]CSS Display(显示) 与 Visibility（可见性）

    CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...

  3. CSS：CSS Display(显示) 与 Visibility（可见性）

    ylbtech-CSS:CSS Display(显示) 与 Visibility(可见性) 1.返回顶部 1. CSS Display(显示) 与 Visibility(可见性) display属性设 ...

  4. CSS Display(显示) 与 Visibility（可见性）

    display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...

  5. CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动

    分组和嵌套  分组选择器 ——————>   嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...

  6. display:none;与visibility:hidden;的区别

    visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...

  7. display:none与visibility: hidden的区别

    display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...

  8. css元素隐藏（display:none和visibility:hidden）

    在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css  display:none 当使用该样式的时候,HTML元素的宽高等 ...

  9. CSS魔法堂：display:none与visibility:hidden的恩怨情仇

    前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...

随机推荐

  1. One layer SoftMax Classifier, "Handwriting recognition"

        import lib needed¶ In [1]: from PIL import Image import numpy as np import matplotlib.pyplot as ...

  2. 使用.Htaccess文件实现301重定向常用的七种方法

    使用.Htaccess文件实现301重定向常用的七种方法   301重定向对广大站长来说并不陌生,从网站建设到目录优化,避免不了对网站目录进行更改,在这种情况下用户的收藏夹里面和搜索引擎里面可能保存的 ...

  3. IDEA 学习笔记之 Maven项目开发

    Maven项目开发: 配置Maven: 新建Maven项目: 选择webapp: 和eclipse一样,设置: 修改maven配置,添加一个新属性,可以加快项目创建速度: 完成: 新建java和tes ...

  4. MongoDB 学习笔记之 DBRef

    DBRef: MongoDB建模有两种方式,一种是内嵌(Embed),另一种是连接(Link).内嵌比较好理解,就是字段内容是个数组,数组内再包含文档,而我们今天介绍的是另一种,称为链接DBRef.由 ...

  5. Vim 使用 DrawIt 画图

    简介 DrawIt 插件用来在 Vim 中进行简单的画图功能.可以方便地移动光标并画出横线.竖线.斜线.箭头和交叉字符,也带有实用的画图功能,轻松画带箭头的线.矩形及椭圆. 官方主页:https:// ...

  6. Android中Project、Module的区别

    Project 可以包含多含 Module. Project相当于eclipse里面的工作区间,module相当于其project.module可以作为狭义上的模块,可以多个app共用的module. ...

  7. 03 python基础作业（一）

    1.将['alex','eric',’rain’]用下划线拼接成字符串.(['alex','eric',123]呢?) li=['alex','eric','rain'] v='_'.join(li) ...

  8. python编程基础之二十七

    列表生成式:[exp for iter_var in iterable] 同样也会有字典生成式,集合生成式,没有元组生成式,元组生成式的语法被占用了 字典生成式,集合生成式,就是外面那个括号换成{}  ...

  9. requests模块(get请求)篇

    - HTTP for Humans,更简洁更友好- 继承了urllib的所有特征- 底层使用的是urllib3- 开源地址: https://github.com/requests/requests- ...

  10. 在集成环境中修改配置文件php.ini不生效的解决办法

    配置完成之后一定要重启服务,如果重启服务还是不生效. 就去看一下phpinfo(),找到Loaded Configuration File选项,这个才是真正读取的配置文件