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. Ubuntu修改源

    linux里的源,简单理解就是你用 apt-get 命令去下载安装软件时,系统去哪里找这个软件.去的那个位置就是源. linux默认的源是国外的,下载速度比较慢,可以修改为国内的一些好的源地址,例如网 ...

  2. 算法 python实现(一) 基本常识

    我算法和数据结构都不好,笨的一比. 现在的目标是熟悉常见和经典算法,看本站两个大牛的博客,在这也推荐一下,特别好,除了算法其他的技术也很不错. Vamei : http://www.cnblogs.c ...

  3. Selenium WebDriver + Grid2 + RSpec之旅(五)---面向对象设计用例

    Selenium WebDriver + Grid2 + RSpec之旅(五) ----面向对象设计用例 前几节讲了怎么一步一步的从零开始到编写出一个简单的测试用例,这一节将要讲一下怎么让测试用例变得 ...

  4. HDOJ/HDU 1075 What Are You Talking About(字符串查找翻译~Map)

    Problem Description Ignatius is so lucky that he met a Martian yesterday. But he didn't know the lan ...

  5. EF-CodeFirst-表关系-延迟/贪婪加载

    表关系建立: http://blog.csdn.net/niewq/article/details/17232321 一对多: namespace LckLib.EF.V6.Models { publ ...

  6. HUD 2089

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  7. Java String的== 与 equals小结

    package hashcode; public class LearnString { public static void main(String[] args) { //1.先在栈中创建一个对S ...

  8. 武汉Uber优步司机奖励政策(2月1日~2月7日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  9. MyEclipse中Web项目的发布和运行

    1.右键对应项目的名称:MyEclipse|Add and Remove Project Deployments... 2.点击Add按钮,选择Tomcat7.x,Deploy type选择Explo ...

  10. 如何调试PHP的Core之获取基本信息 --------风雪之隅 PHP7核心开发者

    http://www.laruence.com/2011/06/23/2057.html https://github.com/laruence PHP开发组成员, Zend兼职顾问, PHP7核心开 ...