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

Posted snow-lanuage

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了认识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>
View Code

  效果

技术图片

  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>
View Code

  效果

技术图片

  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>
View Code

  等同于

技术图片
 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>
View Code

  效果

技术图片

  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>
View Code

  效果

技术图片

  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>
View Code

  效果自行测试

  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>
View Code

  效果自行测试

以上是关于认识CSS中高级技巧之元素的显示与隐藏的主要内容,如果未能解决你的问题,请参考以下文章

CSS高级技巧

15.CSS高级技巧

黑马程序员前端-CSS之元素的显示与隐藏

css有用的代码片段

必须掌握的CSS书写小技巧

必须掌握的CSS书写小技巧