- 第1节:CSS 简介
- 第2节:CSS 语法
- 第3节:CSS Id 和 Class选择器
- 第4节:CSS 创建
- 第5节:CSS Backgrounds (背景)
- 第6节:CSS Text(文本)
- 第7节:CSS Fonts (字体)
- 第8节:CSS 链接样式
- 第9节:CSS 列表样式 (ul)
- 第10节:CSS Table (表格)
- 第11节:CSS Box Model (盒子模型)
- 第12节:CSS Border (边框)
- 第13节:CSS 轮廓(outline)属性
- 第14节:CSS Margin(外边距)
- 第15节:CSS Padding(填充)
- 第16节:CSS 分组和嵌套
- 第17节:CSS 尺寸 (Dimension)
- 第18节:CSS Display (显示) 与 Visibility(可见性)
- 第19节:CSS Positioning (定位)
- 第20节:CSS Float(浮动)
- 第21节:CSS 水平对齐 (Horizontal Align)
- 第22节:CSS 组合选择符
- 第23节:CSS 伪类
- 第24节:CSS 伪元素
- 第25节:CSS 导航栏
- 第26节:CSS 下拉菜单
- 第27节:CSS 图像透明/不透明
- 第28节:CSS 图像拼合技术
- 第29节:CSS 媒体类型
- 第30节:CSS 属性选择器
CSS Display (显示) 与 Visibility(可见性)
CSS Display(显示) 与 Visibility(可见性)
CSS display 属性和 visibility 属性都可以用来隐藏某个元素,但是这两个属性有不同的定义,请详细阅读以下内容。
display 属性设置一个元素应如何显示,visibility 属性指定一个元素应可见还是隐藏。
隐藏元素 - display:none 或 visibility:hidden
隐藏一个元素可以通过把 display 属性设置为"none",或把 visibility 属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。
visibility:hidden 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
实例
display:none 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
实例
CSS Display - 块和内联元素
块元素是一个元素,占用了全部宽度,在前后都是换行符。
块元素的例子:
- <h1>
- <p>
- <div>
内联元素只需要必要的宽度,不强制换行。
内联元素的例子:
- <span>
- <a>
如何改变一个元素显示
可以更改内联元素为块元素,反之亦然,可以使页面看起来是以一种特定的方式组合,并仍然遵循 web 标准。
下面的示例把列表项显示为内联元素:
实例
下面的示例把 span 元素作为块元素:
实例
注意:变更元素的显示类型看该元素是如何显示,它是什么样的元素。例如:一个内联元素设置为 display:block 是不允许有它内部的嵌套块元素。
更多实例
如何显示元素的内联元素。
这个例子演示了如何显示一个元素的内联元素。
如何显示元素的块元素。
这个例子演示了如何显示一个元素的块元素。
如何使用一个表的collapse属性。
这个例子演示了如何使用表的collapse属性。