前端之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属性设定元素隐藏以后，隐藏元素是不占有原本位置的。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>元素显示与隐藏-测试</title>

     <style type="text/css">

         .up {

             width: 200px;

             height: 200px;

             background-color: red;

             display: none;

         }

         .down {

             width: 200px;

             height: 200px;

             background-color: blue;

         }

     </style>

 </head>

 <body>

     <div class="up"></div>

     <div class="down"></div>

 </body>

 </html>

　　效果

　　visibility　　　　

　　隐藏元素：visibility：hidden；

　　显示元素：visibility：visible；

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>元素显示与隐藏-测试</title>

     <style type="text/css">

         .up {

             width: 200px;

             height: 200px;

             background-color: red;

             /*display: none;  */

             visibility: hidden;

         }

         .down {

             width: 200px;

             height: 200px;

             background-color: blue;

         }

     </style>

 </head>

 <body>

     <div class="up"></div>

     <div class="down"></div>

 </body>

 </html>

　　效果

　　overflow

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

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>元素显示与隐藏-测试</title>

     <style type="text/css">

         p {

             width: 100px;

             height: 50px;

             border: 1px solid #f00;

         }

     </style>

 </head>

 <body>

     <p>

         层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

     </p>

 </body>

 </html>

　　等同于

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>元素显示与隐藏-测试</title>

     <style type="text/css">

         p {

             width: 100px;

             height: 50px;

             border: 1px solid #f00;

             overflow: visible;

         }

     </style>

 </head>

 <body>

     <p>

         层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

     </p>

 </body>

 </html>

　　效果

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>元素显示与隐藏-测试</title>

     <style type="text/css">

         p {

             width: 100px;

             height: 50px;

             border: 1px solid #f00;

             overflow: hidden;

         }

     </style>

 </head>

 <body>

     <p>

         层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

     </p>

 </body>

 </html>

　　效果

　　overflow：scroll；为盒子添加滚动条，无论盒子内容是否超出盒子大小。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>元素显示与隐藏-测试</title>

     <style type="text/css">

         p {

             width: 100px;

             height: 50px;

             border: 1px solid #f00;

             overflow: scroll;

         }

     </style>

 </head>

 <body>

     <p>

         层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

     </p>

 </body>

 </html>

　　效果自行测试

　　overflow：auto；盒子内容不超出盒子大小不添加滚动条，盒子内容超出盒子大小的情况下自动添加滚动条。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>元素显示与隐藏-测试</title>

     <style type="text/css">

         p {

             width: 100px;

             height: 50px;

             border: 1px solid #f00;

             overflow: auto;

         }

     </style>

 </head>

 <body>

     <p>

         层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

     </p>

 </body>

 </html>

　　效果自行测试

　　文本内容溢出其他处理

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

　　white-space

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

　　white-space：normal；

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>溢出文本处理-测试</title>

     <style type="text/css">

         div {

             width: 200px;

             height: 20px;

             border: 1px solid red;

         }

     </style>

 </head>

 <body>

     <div>

         CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

     </div>

 </body>

 </html>

　　效果

　　white-space：nowrap；

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>溢出文本处理-测试</title>

     <style type="text/css">

         div {

             width: 200px;

             height: 20px;

             border: 1px solid red;

             white-space: nowrap;

         }

     </style>

 </head>

 <body>

     <div>

         CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

     </div>

 </body>

 </html>

　　效果

　　超出部分隐藏

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>溢出文本处理-测试</title>

     <style type="text/css">

         div {

             width: 200px;

             height: 20px;

             border: 1px solid red;

             white-space: nowrap;

             overflow: hidden;

         }

     </style>

 </head>

 <body>

     <div>

         CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

     </div>

 </body>

 </html>

　　效果

　　超出部分省略号表示

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>溢出文本处理-测试</title>

     <style type="text/css">

         div {

             width: 200px;

             height: 20px;

             border: 1px solid red;

             white-space: nowrap;

             text-overflow: ellipsis;

             overflow: hidden;

             text-overflow: ellipsis;

         }

     </style>

 </head>

 <body>

     <div>

         CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

     </div>

 </body>

 </html>

　　效果

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

　　

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

  1. jquery控制css的display(控制元素的显示与隐藏)

    使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...

  2. [CSS]元素的显示与隐藏

    摘自:http://www.zhangxinxu.com/wordpress/?p=1528 元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与disp ...

  3. CSS——元素的显示与隐藏

    元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow. 他们的主要目的是让一个元素在页面中消失,但是不在文档 ...

  4. CSS元素的显示与隐藏

    CSS元素的显示与隐藏 我们访问某些网站的时候,经常可以看到一些广告弹出来,点击关闭就不见了,但是重新刷新页面后,广告又会重新弹出来.这就是元素的显示和隐藏的一个应用. 1. display属性 di ...

  5. css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）

    css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...

  6. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  7. react中控制元素的显示与隐藏

    1.通过 state 变量来控制是否渲染元素 类似于 vue 的 v-if 方法是通过变量来控制是否加载元素的,如果变量为false,内容就直接不会渲染的. class Demo extends Re ...

  8. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  9. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

随机推荐

  1. 1、设备网络SDK主要功能

    图像预览.文件回放和下载,云台控制,布防/撤防,语音对讲,日志管理,解码卡,远程升级,远程重启/关闭,格式化硬盘,参数配置(系统配置,通道配置,串口配置,报警配置,用户配置),多路解码器,智能设备功能 ...

  2. linux的mysql操作

    最近工作中经常需要使用到MySQL,有时候在WINXP,有时候在Linux中,而这次,需要在CentOS中配置一下,还需要用到phpmyadmin, 在网上搜了不少的资料. 无意中还找到了CentOS ...

  3. 洛谷P2173 [ZJOI2012]网络(10棵lct与瞎jb暴力)

    有一个无向图G,每个点有个权值,每条边有一个颜色.这个无向图满足以下两个条件: 对于任意节点连出去的边中,相同颜色的边不超过两条. 图中不存在同色的环,同色的环指相同颜色的边构成的环. 在这个图上,你 ...

  4. Verilog MIPS32 CPU（八）-- 控制器

    Verilog MIPS32 CPU(一)-- PC寄存器 Verilog MIPS32 CPU(二)-- Regfiles Verilog MIPS32 CPU(三)-- ALU Verilog M ...

  5. ML.NET---.NET下的机器学习引擎（简介）

    ML.NET 是一个跨平台的开源机器学习框架,它可以使 .NET 开发人员更容易的开展机器学习工作. ML.NET 允许 .NET 开发人员开发自己的模型,即使没有机器学习的开发经验,也可以很容易的将 ...

  6. unit vs2017基于nunit framework创建单元测试

    unit  vs2017基于nunit framework创建单元测试 一.简叙: 单元测试大型项目中是必备的,所以不可忽视,一个项目的成败就看是否有单元测试,对后期的扩展维护都带来了便利. 二.安装 ...

  7. 得到windows聚焦图片（windows 10）

    有些Windows聚焦图片确实很漂亮,很希望保留下来,但是Windows聚焦图片总更好,网上有得到聚焦图片的方法,每次都手动去弄真麻烦,于是自己编了一个小程序,自动得到Windows聚焦图片,下面是运 ...

  8. php 多维数据根据某个或多个字段排序

    实现多维数组的指定多个字段排序 上面的实例讲解了如何实现多维数组指定一个字段排序,但如果要实现指定多个字段来对数组进行排序该如何思考? 多个字段是几个?2个,3个或更多,所以这个不确定的因素需要排除. ...

  9. 线程概要 Java

    线程 进程和线程的区别 串行:初期的计算机只能串行执行任务,大量时间等待用户输入 批处理:预先将用户的指令集中成清单,批量串行处理用户指令,仍然无法并发执行 进程:进程独占内存空间,保存各自运行状态, ...

  10. Java之static静态代码块

    Java之static静态代码块 构造代码块 使用{}包裹的代码区域,这里的代码区域特指位于class{}下面的而不是存在于其他type method(){}这类函数下面的代码区域 public cl ...