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. JS思考遍历对象

    var json={ “name”:”小明”, “age”:”10”, “sex”:”男” } for(var key in json); //key只是个变量名 console.log(key); ...

  2. Spring boot 官网学习笔记 - logging

    commons-logging和slf4j是java中的日志门面,即它们提供了一套通用的接口,具体的实现可以由开发者自由选择.log4j和logback则是具体的日志实现方案. 比较常用的搭配是com ...

  3. Android类似日历的翻转控件

    最近写了个翻转面板的控件拿出来与大家分享一下,类似日历的那种,写的比较简单有需要的可以直接拿去用.直接上效果图吧,代码我放在百度云了,有问题的话直接回复就好呢,大家一起交流下. http://pan. ...

  4. eclipse与hadoop集成，运行wordCount1

    搭好了hadoop集群之后,就该使用它了 第一步:下载hadoop eclipse的插件,将它放到eclipse\plugins的目录下,然后重启eclipse,点击windows->show ...

  5. onethinkphp 添加钩子报错

    今天改了下程序再保存,出现错误:Namespace declaration statement has to be the very first statement in the script 度娘一 ...

  6. Python集训营45天—Day08 (文件操作)

    目录 1. 文件操作介绍 2. 文件的读写 2.1 文本文件 2.2 二进制文件 2.3 JSON文件 3. 文件的定位,重命名和删除 4. 文件夹的相关操作 1. 文件操作介绍 大家应该听说过一句话 ...

  7. 软件开发工具（第9章：使用Eclipse进行C/C++开发)

    一.安装MinGW MinGW是指用来生成可执行文件的编译环境,它是开发C/C++项目 的工具集.为了能够使用Eclipse CDT编译且运行C和C++程序,必须 要安装一个C/C++编译器. 下载: ...

  8. java并发之CAS详解

    前言 在高并发的应用当中,最关键的问题就是对共享变量的安全访问,通常我们都是通过加锁的方式,比如说synchronized.Lock来保证原子性,或者在某些应用当中,用voliate来保证变量的可见性 ...

  9. UVa12105 越大越好

    题文:https://vjudge.net/problem/12364(或者见紫书) 题解: 因为题目中有两个限制条件,那么我们就顺着题目的意思来dp,设dp[i][j]表示目前还剩下的i个火柴,用这 ...

  10. Spring基础（二）

    一.使用注解配置Spring 1.1步骤 --配置文件中,指明注解位置 --要用的地方打上注解 --改对象的作用范围(修改掉默认的单例,变多例) --属性的注入(两种) 使用的反射实现 set方法实现 ...