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. python学习笔记之zipfile模块

    为什么学习: 在做自动化测试平台的apk上传功能部分时候,涉及到apk上传后提取apk的icon图标,通过aapt解析apk,获取对应icon在apk中的地址,通过python的zipfile模块来解 ...

  2. layui内部定义的function，外部调用时候，提示某函数未定义现象解决方案

    1.引入layui.all.js文件 <script type="text/javascript" src="${pageContext.request.conte ...

  3. Locomotion和Navigation的区别

    Locomotion和navigation两者都是移动.漫游的意思.但是locomotion是一个比navigation更大的概念,它指的是所有的第一人称视角的变换(first-person moti ...

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

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

  5. Scala Try Catch Finally

    Scala Try Catch Finally: 在Java中返回值优先级顺序:finally最高, try,catch 选其一,try中抛异常,返回catch,不抛异常,返回try,. public ...

  6. python编程基础之三十四

    面向对象:三大特征:封装,继承,多态 封装:隐藏对象的实现过程,对外仅仅公开接口,控制在程序中的读取和修改的访问级别 类,函数都是一种封装 属性私有化:当类里面的属性不想被外部访问,可以将这些属性设置 ...

  7. 文本分类（TFIDF/朴素贝叶斯分类器/TextRNN/TextCNN/TextRCNN/FastText/HAN）

    目录 简介 TFIDF 朴素贝叶斯分类器 贝叶斯公式 贝叶斯决策论的理解 极大似然估计 朴素贝叶斯分类器 TextRNN TextCNN TextRCNN FastText HAN Highway N ...

  8. Stack Overflow 上 250W 浏览量的一个问题：你对象丢了

    在逛 Stack Overflow 的时候,发现最火的问题竟然是:什么是 NullPointerException(java.lang.NullPointerException),它是由什么原因导致的 ...

  9. Vue-cli中axios传参的方式以及后端取的方式

    0917自我总结 Vue-cli中axios传参的方式以及后端取的方式 一.传参 params是添加到url的请求字符串中的,用于get请求. data是添加到请求体(body)中的, 用于post请 ...

  10. 7.Linux文件编辑之Vim

    1.VIM基本概述 1.什么是VIM? vi和vim是Linux下的一个文本编辑工具.(可以理解为windows的记事本,或word文档) 2.为什么要使用VIM? 因为Linux系统一切皆为文件,而 ...