CSS Display(显示)和Visibility(可见性)
CSS Display(显示)和Visibility(可见性)
一、简介
display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间)。
二、隐藏元素 - 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是不允许有它内部的嵌套块元素。
五、示例
(1)示例1:何显示一个元素的内联元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
p {display:inline;}
</style>
</head> <body>
<p>display 属性的值为 "inline"的结果</p>
<p>两个元素显示在同一水平线上。</p>
</body>
</html>
效果:
(2)示例2:显示一个元素的块元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
span
{
display:block;
}
</style>
</head>
<body> <span>display 属性值为 "block" 的结果</span> <span>这两个元素之间的换行符。</span> </body>
</html>
效果:
(3)示例3:何使用表的collapse属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
table, th, td {
border: 1px solid black;
} tr.collapse {
visibility: collapse;
}
</style>
</head>
<body> <table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr class="collapse">
<td>Lois</td>
<td>Griffin</td>
</tr>
</table> <p><b>注意:</b> IE8 及其更早版本需要通过指定 !DOCTYPE 才可以支持 visibility:collapse。</p> </body>
</html>
效果:
CSS Display(显示)和Visibility(可见性)的更多相关文章
- [转]CSS Display(显示) 与 Visibility(可见性)
CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...
- CSS:CSS Display(显示) 与 Visibility(可见性)
ylbtech-CSS:CSS Display(显示) 与 Visibility(可见性) 1.返回顶部 1. CSS Display(显示) 与 Visibility(可见性) display属性设 ...
- CSS Display(显示) 与 Visibility(可见性)
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...
- css中的display(显示)和visibility(可见性)
display定义和用法 display 属性规定元素应该生成的框的类型. 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险, ...
- CSS display:none和visibility:hidden区别
你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...
- Display(显示) 与 Visibility(可见性)
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把dis ...
- [HTML/CSS]display:none和visibility:hidden的区别
写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...
- display:none;与visibility:hidden;的区别
visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...
- CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
分组和嵌套 分组选择器 ——————> 嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...
随机推荐
- 【BZOJ4275】[ONTAK2015]Badania naukowe DP
[BZOJ4275][ONTAK2015]Badania naukowe Description 给定三个数字串A,B,C,请找到一个A,B的最长公共子序列,满足C是该子序列的子串. Input 第一 ...
- klg-jpa:spring-data-jpa 最佳实践
klg-jpa:spring-data-jpa 最佳实践 项目介绍 码云地址:https://gitee.com/klguang/klg-jpa JPA是sun为POJO持久化制定的标准规范,用来操作 ...
- JAVAWEB的Listener
学习监听器 1监听器是什么 :监听对象的变化或者监听事件的触发 2有什么作用:当被监听的对象状态改变时,触发对应的方法 3怎么用: ①声明监听器,(继承对应的监听器) ②重写监听方法,并实现自己需要的 ...
- PAT 甲级 1020 Tree Traversals (二叉树遍历)
1020. Tree Traversals (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Suppo ...
- Java23种设计模式学习笔记【目录总贴】
创建型模式:关注对象的创建过程 1.单例模式:保证一个类只有一个实例,并且提供一个访问该实例的全局访问点 主要: 饿汉式(线程安全,调用效率高,但是不能延时加载) 懒汉式(线程安全,调用效率不高,但 ...
- Java 输入/输出流
1. 编码问题 在介绍输入输出之前我们先介绍下关于编码的一些基本知识点.当一个文件里既有中文字符又有英文字符时.他们在不同的编码方式下会占领不同的内存: 1. ANSI 中文占领 2 个字节的内存空间 ...
- shell_03
函数: fanction print_welcome(){ echo welcome now time is `date` } print_welcome 函数调用 print _welcome 00 ...
- (0.2.1)mysql数据库环境-操作系统配置
目录 1.基于Linux平台的Mysql项目场景介绍 2.mysql数据库运行环境准备-最优配置 2.1.如何查看官方文档了解环境要求 2.2.安装虚拟机环境与操作系统 2.3.操作系统最优配置9大步 ...
- 使用selenium找出外卖点餐次数最多的10个顾客
大锅在做外卖,给我说能否统计出这半年点餐次数最多的10个顾客,我不知道APP本身是否有这个功能,想了下最近用selenium较多,就用selenium尝试下吧. 1 定义一个类,这里先描述需要的属性和 ...
- 检查Linux服务器性能命令详解
如果你的Linux服务器突然负载暴增,如何在最短时间内找出Linux性能问题所在? 通过执行以下命令,可以在1分钟内对系统资源使用情况有个大致的了解. uptime dmesg | tail vmst ...