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

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

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

h1.hidden {visibility:hidden;}

</style>

</head>

<body>

<h1>这是一个可见标题</h1>

<h1 class="hidden">这是一个隐藏标题</h1>

<p>注意, 实例中的隐藏标题仍然占用空间。</p>

</body>

</html>

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

h1.hidden {display:none;}

</style>

</head>

<body>

<h1>这是一个可见标题</h1>

<h1 class="hidden">这是一个隐藏标题</h1>

<p>注意, 实例中的隐藏标题不占用空间。</p>

</body>

</html>

CSS Display - 块和内联元素

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

块元素的例子：

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

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

内联元素的例子：

  • <span>
  • <a>

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

li{display:inline;}

</style>

</head>

<body>

<p>链接列表水平显示：</p>

<ul>

<li><a href="/html/" target="_blank">HTML</a></li>

<li><a href="/css/" target="_blank">CSS</a></li>

<li><a href="/js/" target="_blank">JavaScript</a></li>

<li><a href="/xml/" target="_blank">XML</a></li>

</ul>

</body>

</html>

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

块元素独占一行

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

span

{

    display:block;

}

</style>

</head>

<body>

<h2>Nirvana</h2>

<span>Record: MTV Unplugged in New York</span>

<span>Year: 1993</span>

<h2>Radiohead</h2>

<span>Record: OK Computer</span>

<span>Year: 1997</span>

</body>

</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. Andorid监听SoftKeyboard弹起事件

    对于Android键盘事件Google并没有提供一个好的接口去监听它,有时候就为项目需要就必须要自己去想办法去监听,由于我最近也要实现登陆与注册的功能,我的想法很简单实现起来也比较容易,主要的原理是在 ...

  2. Java初中级面试笔记及对应视频讲解

    笔试题链接:点击打开链接   密码:提取码:7h9e 视频下载链接: 点击打开链接  提取码:hyye 百万it课程 https://pan.baidu.com/s/1ldJ_Ak7y0VL5Xmy9 ...

  3. 【SQL基础】char，nchar，vchar,nvchar之间的区别

    (1)       定义: char:    固定长度,存储ANSI字符,不足的补英文半角空格. nchar:   固定长度,存储Unicode字符,不足的补英文半角空格 varchar:  可变长度 ...

  4. Angular 自定义管道

    管道的作用就是将原始值进行转化处理,转换为所需要的值: 1. 新建sex-reform.pipe.ts文件 ng g pipe sex-reform 2. 编辑sex-reform.pipe.ts文件 ...

  5. 正睿OI国庆DAY2:图论专题

    正睿OI国庆DAY2:图论专题 dfs/例题 判断无向图之间是否存在至少三条点不相交的简单路径 一个想法是最大流(后来说可以做,但是是多项式时间做法 旁边GavinZheng神仙在谈最小生成树 陈主力 ...

  6. java第2天:类，对象，封装和构造方法

    1 面向对象简述 将 {1,3,45,56,78,90}转化为[1,3,45,56,78,90] 1-2 方法1:面向过程 代码块 public class test { public static ...

  7. python与数据存储

    思考:为什么使用计算机? 存储数据,计算数据 思考:数据存在哪里? 数据存在内存里 内存:内存是计算机中重要的部件之一,它是与CPU进行沟通的桥梁.计算机中所有程序的运行都是在内存中进行的,因此内存的 ...

  8. Java如何安装JDK，配置环境变量。超级详细图及操作

    突然想起自己大学刚接触java的时候,要下载JDK和配置环境变量,那时候我上网找了很多教学,结果发现很多的博主都是表达不太清晰,或者是我理解能力差点,导致我那时候搞了一个多小时才搞定,而且事后每次我重 ...

  9. C-01 手写数字识别

    目录 手写数字识别应用程序 一.导入模块 二.图像转向量 三.训练并测试模型 四.模型转应用程序 4.1 展示图片 4.2 处理图片 4.3 预测图片 更新.更全的<机器学习>的更新网站, ...

  10. 1.linux系统基础笔记（互斥量、信号量）

    操作系统是很多人每天必须打交道的东西,因为在你打开电脑的一刹那,随着bios自检结束,你的windows系统已经开始运行了.如果问大家操作系统是什么?可能有的人会说操作系统就是windows,就是那些 ...