认识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

　　效果自行测试

　　文本内容溢出其他处理

　　文本内容溢出是指文本内容超出盒子大小，产生溢出，处理方法可以上面一样对溢出部分设置隐藏，也可强制于一行显示，还可以将溢出部分转化为省略号形式。

　　white-space

　　white-space属性有两个属性值，分别为normal，和nowrap。其中normal为缺省默认值，样式显示与overflow：visible；显示一致。nowrap属性值设置，样式表现为文本内容强制在一行显示到结束，除非在文本中加入<br />换行元素。可以说有纵向溢出转变为横向溢出。

　　white-space：normal；

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>溢出文本处理-测试</title>
 6     <style type="text/css">
 7         div {
 8             width: 200px;
 9             height: 20px;
10             border: 1px solid red;
11         }
12     </style>
13 </head>
14 <body>
15     <div>
16         CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
17     </div>
18 </body>
19 </html>
View Code

　　效果

　　white-space：nowrap；

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>溢出文本处理-测试</title>
 6     <style type="text/css">
 7         div {
 8             width: 200px;
 9             height: 20px;
10             border: 1px solid red;
11             white-space: nowrap;
12         }
13     </style>
14 </head>
15 <body>
16     <div>
17         CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
18     </div>
19 </body>
20 </html>
View Code

　　效果

　　超出部分隐藏

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>溢出文本处理-测试</title>
 6     <style type="text/css">
 7         div {
 8             width: 200px;
 9             height: 20px;
10             border: 1px solid red;
11             white-space: nowrap;
12             overflow: hidden;
13         }
14     </style>
15 </head>
16 <body>
17     <div>
18         CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
19     </div>
20 </body>
21 </html>
View Code

　　效果

　　超出部分省略号表示

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>溢出文本处理-测试</title>
 6     <style type="text/css">
 7         div {
 8             width: 200px;
 9             height: 20px;
10             border: 1px solid red;
11             white-space: nowrap;
12             text-overflow: ellipsis;
13             overflow: hidden;
14             text-overflow: ellipsis;
15         }
16     </style>
17 </head>
18 <body>
19     <div>
20         CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
21     </div>
22 </body>
23 </html>
View Code

　　效果

　　注意：text-overflow:ellipsis；设置超出部分转化省略号必须结合white-space:nowrap;和overflow:hidden；共同使用才可以作用。

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/snow-lanuage/p/10468513.html