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

Box 1
Box 2
Box 3

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

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

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

实例

h1.hidden {visibility:hidden;}

尝试一下 »

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

实例

h1.hidden {display:none;}

尝试一下 »


CSS Display - 块和内联元素

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

块元素的例子:

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

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

内联元素的例子:

  • <span>
  • <a>

如何改变一个元素显示

可以更改内联元素和块元素,反之亦然,可以使页面看起来是以一种特定的方式组合,并仍然遵循web标准。

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

实例

li {display:inline;}

尝试一下 »

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

实例

span {display:block;}

尝试一下 »

注意:变更元素的显示类型看该元素是如何显示,它是什么样的元素。例如:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。


更多实例

如何显示元素的内联元素。

这个例子演示了如何显示一个元素的内联元素。

如何显示元素的块元素。

这个例子演示了如何显示一个元素的块元素。

如何使用一个表的collapse属性。

这个例子演示了如何使用表的collapse属性

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

  1. [转]CSS Display(显示) 与 Visibility(可见性)

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

  2. CSS:CSS Display(显示) 与 Visibility(可见性)

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

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

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

  4. CSS display:none和visibility:hidden区别

    你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...

  5. Display(显示) 与 Visibility(可见性)

    display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把dis ...

  6. [HTML/CSS]display:none和visibility:hidden的区别

    写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...

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

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

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

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

  9. CSS Display(显示)和Visibility(可见性)

    CSS Display(显示)和Visibility(可见性) 一.简介 display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间) ...

随机推荐

  1. Error creating bean with name 'sessionFactory' defined in class path resource [applicationContext.xml]: Invocation of init method failed; neste

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sessionFacto ...

  2. AppScan修复漏洞:启用不安全的HTTP方法

    最近对于系统使用Appscan扫描出中危漏洞“启用不安全的HTTP方法,找了很多修复方法都不能达到效果. 漏洞截图: 漏洞描述: 危险级别   中危险 影响页面   整个WEB页面. 简短描述   管 ...

  3. 数据库分库分表(sharding)系列【转】

    原文地址:http://www.uml.org.cn/sjjm/201211212.asp数据库分库分表(sharding)系列 目录; (一) 拆分实施策略和示例演示 (二) 全局主键生成策略 (三 ...

  4. List<T>的IndexOf方法和Remove方法

    Microsoft地址 List<T>的IndexOf()方法 如果T是值类型的,就按照比较值的方法从列表的第一个元素开始逐个匹配,如果T是引用类型,就比较引用是否相同 举例如下: cla ...

  5. 奇怪的Lisp和难懂的计算机程序的构造和解释

    最近用新买的 Kindle 看<黑客与画家>的Lisp部分,发现作者 Paul Graham 很推崇 Lisp 语言,并且认为其它语言都没有Lisp简洁“成熟”,并且举例证明其它语言都在往 ...

  6. glsl-UBO

    UBO 是什么?为何要用UBO? 1.数据共享设计 采用Block的原因是: 如果你的程序中包含了多个着色器,而且这些着色器使用了相同的Uniform变量,你就不得不为每个着色器分别管理这些变量.Un ...

  7. Linux Mono OpenShift Cloud9 rhc

    OpenShift Mono Asp.net MVC4 MySql 1..Net4.0+Mvc4,不要使用太新的.Net4.5.1+Mvc5. 2.MySql数据库:MySql.Data.Dll 从官 ...

  8. UIButton set touch handler in code

    One option is to set the button up using [myButton addTarget:yourOtherClass action:@selector(mySelec ...

  9. Java ThreadLocal深度解析

    首先,ThreadLocal 不是用来解决共享对象的多线程访问问题的,一般情况下,通过ThreadLocal.set() 到线程中的对象是该线程自己使用的对象,其他线程是不需要访问的,也访问不到的.各 ...

  10. 【转】Flask快速入门

    迫不及待要开始了吗?本页提供了一个很好的 Flask 介绍,并假定你已经安装好了 Flask.如果没有,请跳转到 安装 章节. 一个最小的应用 一个最小的 Flask 应用看起来会是这样: from ...