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. JVM 调优 - jmap

    Java命令学习系列(三)——Jmap 2015-05-16 分类:Java 阅读(17065) 评论(9) 阿里大牛珍藏架构资料,点击链接免费获取 Jmap jmap是JDK自带的工具软件,主要用于 ...

  2. SharePoint 2013 Create Folder with conententtype programer

    记录一下昨天写的SharePoint tool,需求是这样的: 在SharePoint list subfolder 下创建1000个folder,这些folder指定特殊的contenttype,c ...

  3. cp -rf 操作时依然会提示覆盖

    在linux上经常会使用cp -rf命令,该命令就是强制覆盖指定目录下的文件,但有时使用该命令依然会提示是否覆盖,cp命令的参数有如下一些: 参数说明: -a:此选项通常在复制目录时使用,它保留链接. ...

  4. Golang 接口与反射知识要点

    目录 Golang 接口与反射知识要点 1. 接口类型变量 2. 类型断言 3. 鸭子类型 4. 反射机制 5. reflect 包 TypeOf().ValueOf() Type().Kind() ...

  5. Linux——服务器版本安装 (VMware)

    一.Linux简介 Linux是一套免费使用和自由传播的类UNIX操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX工具软件.应用程序和网 ...

  6. Python——Pandas速查手册中文版

    转自——http://blog.csdn.net/qq_33399185/article/details/60872853,非常感谢大神的整理! 还有图片版,转自——https://zhuanlan. ...

  7. Zookeeper工作过程详解

    一.Zookeeper工作机制 分布式和集中式系统相比,有很多优势,比如更强的计算能力,存储能力,避免单点故障等问题.但是由于在分布式部署的方式遇到网络故障等问题的时候怎么保证各个节点数据的一致性和可 ...

  8. 【译】微软的Python入门教程（一）

    Getting started with Python(Python入门) Overview 概述 The series of videos on Channel 9 is designed to h ...

  9. svg foreignObject的作用（文本换行，生成图片）

    SVG内部利用foreignObject嵌入XHTML元素 <foreignObject>元素的作用是可以在其中使用具有其它XML命名空间的XML元素,换句话说借助<foreignO ...

  10. nginx(tengine)访问日志分片

    说明 nginx日志按天分片是运维的基本要求,不仅可以减小文件大小,方便检索关键数据,也可以定时删除过期的日志.可是nginx和tengine默认并不支持文件分片,因此需要额外处理. 另外,日志分片需 ...