认识CSS中高级技巧之元素的显示与隐藏

前端之HTML,CSS(八)

  CSS高级技巧

  元素的显示与隐藏

  CSS中有三个属性可以设置元素的显示于隐藏,分别是:display、visibility和overflow。

  display

  隐藏元素:display:none;

  显示元素:display:block;(两层含义:1.显示模式转换为块级元素显示;2.显示元素)

  display属性缺省默认属性值为:block或者inline,至于选择哪一个交给HTML元素确定,块级元素如<div>、<p>等默认显示为block,行内元素如<span>、<em>等默认显示为inline,但是无论block还是inline都表示元素显示。此外,display属性设定元素隐藏以后,隐藏元素是不占有原本位置的。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>元素显示与隐藏-测试</title>
 6     <style type="text/css">
 7         .up {
 8             width: 200px;
 9             height: 200px;
10             background-color: red;
11             display: none;
12         }
13         .down {
14             width: 200px;
15             height: 200px;
16             background-color: blue;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="up"></div>
22     <div class="down"></div>
23 </body>
24 </html>

  效果

  visibility    

  隐藏元素:visibility:hidden;

  显示元素:visibility:visible;

  visibility属性设定元素隐藏以后,隐藏元素是保留原本位置的。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>元素显示与隐藏-测试</title>
 6     <style type="text/css">
 7         .up {
 8             width: 200px;
 9             height: 200px;
10             background-color: red;
11             /*display: none;  */
12             visibility: hidden;
13         }
14         .down {
15             width: 200px;
16             height: 200px;
17             background-color: blue;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="up"></div>
23     <div class="down"></div>
24 </body>
25 </html>

  效果

  overflow

  overflow属性有4个属性值:visible、hidden、scroll、auto。

  overflow:visible;缺省默认属性,盒子内容超出盒子大小,超出的内容部分会显示在盒子外部。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>元素显示与隐藏-测试</title>
 6     <style type="text/css">
 7         p {
 8             width: 100px;
 9             height: 50px;
10             border: 1px solid #f00;
11         }
12     </style>
13 </head>
14 <body>
15     <p>
16         层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
17     </p>
18 </body>
19 </html>

  等同于

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>元素显示与隐藏-测试</title>
 6     <style type="text/css">
 7         p {
 8             width: 100px;
 9             height: 50px;
10             border: 1px solid #f00;
11             overflow: visible;
12         }
13     </style>
14 </head>
15 <body>
16     <p>
17         层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
18     </p>
19 </body>
20 </html>

  效果

  overflow:hidden;超出盒子大小的内容部分会隐藏。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>元素显示与隐藏-测试</title>
 6     <style type="text/css">
 7         p {
 8             width: 100px;
 9             height: 50px;
10             border: 1px solid #f00;
11             overflow: hidden;
12         }
13     </style>
14 </head>
15 <body>
16     <p>
17         层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
18     </p>
19 </body>
20 </html>

  效果

  overflow:scroll;为盒子添加滚动条,无论盒子内容是否超出盒子大小。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>元素显示与隐藏-测试</title>
 6     <style type="text/css">
 7         p {
 8             width: 100px;
 9             height: 50px;
10             border: 1px solid #f00;
11             overflow: scroll;
12         }
13     </style>
14 </head>
15 <body>
16     <p>
17         层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
18     </p>
19 </body>
20 </html>

  效果自行测试

  overflow:auto;盒子内容不超出盒子大小不添加滚动条,盒子内容超出盒子大小的情况下自动添加滚动条。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>元素显示与隐藏-测试</title>
 6     <style type="text/css">
 7         p {
 8             width: 100px;
 9             height: 50px;
10             border: 1px solid #f00;
11             overflow: auto;
12         }
13     </style>
14 </head>
15 <body>
16     <p>
17         层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
18     </p>
19 </body>
20 </html>

  效果自行测试

原文地址:https://www.cnblogs.com/snow-lanuage/p/10468513.html

时间: 2024-10-06 00:12:13

认识CSS中高级技巧之元素的显示与隐藏的相关文章

CSS——元素的显示与隐藏

元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow. 他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除. 最常见的是网站广告,当我们点击类似关闭不见了,但是我们重新刷新页面,它们又会出现和你玩躲猫猫!! display 显示 display 设置或检索对象是否及如何显示. display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外,同时还有显示

JavaScript - 元素的显示和隐藏

元素的显示和隐藏 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>元素的显示和隐藏</title> <style type="text/css"> img{ display:block; } </style> <script type="text/

控制页面元素的显示和隐藏

CreateTime--2017年7月13日07:30:55Author:Marydon js控制页面元素的显示和隐藏&<c:if></c:if>标签控制页面元素的显示和隐藏 说明:本文的重点在使用后者实现 实例: 医嘱类型分为:长嘱,临嘱,中医三种,页面默认只显示长嘱信息,点击临嘱或中医显示对应信息:选中变色. CSS部分: /* 医嘱:长嘱,临嘱,中医样式显示 Start*/ .yz_td1 { line-height: 28px; height: 28px; padd

使用CSS3动画 animation 来控制元素的显示和隐藏

CSS3中 animation 和 transition 俩样式都能创建动画效果,而且是后台C++执行的,所以效率比普通jQuery的js模拟动画的效率高很多,所以建议大家能用css实现的效果都用css. transition的使用比较简单,这里就不介绍了,着重为大家介绍下 animation . animation 的css属性有很多,本文通过 animation-name 来控制启动动画和转换动画,以下是一个通过 animation 来控制元素的显示和隐藏的例子(仅支持webkit): <!

jQuery判断元素是否显示与隐藏

jQuery判断一个元素是显示还是隐藏,jQuery使用is()方法来判断一个元素是否显示,反之则为隐藏 核心代码 if($("#username").is(":hidden")){ } 实例代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test.html</ti

angularjs学习笔记之二(DOM 元素的显示与隐藏)

DOM元素的显示与隐藏 ,是前端开发中常常会用到的功能,angularjs中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean. [HTML代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" conten

CSS实现控制元素的显示和隐藏

1 使用label + input实现元素的隐藏和显示 以下代码点击‘菜单’可以实现li列表的显示和隐藏: <style type="text/css"> *{ margin: 0; padding: 0; } input, ul{ display: none; } input:checked ~ ul { display: block; } </style> <body> <label for="menu">菜单&l

JQuery采用CSS实现DOM元素的显示和隐藏

今天参加了一个Code Review活动,看了一个同事的写的代码,感觉满足了当前的功能实现,但是从长远来看,无论从代码复用角度还是维护上看都显得非常差.先看看需求是什么吧.需求是通过下拉框的选择不同的选项,来显示和隐藏一个文本框.同事是这样写的: Code 1 <select name="select" onChange="disinput(this)"> <option value="1">1</option>

jQuery判断当前元素显示状态并控制元素的显示与隐藏

1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id").is(':hidden');   //true为隐藏,false为显示 if($("#id").is(':hidden')){ //逻辑代码 } 2.jQuery控制css的display $("#id").show();    //表示display:block $