在网站上经常会有一些需要一定操作才会显示或隐藏的元素，这时会用到元素的隐藏与显示。主要通过以下三种属性实现。

1、display ：none|block |inline |inline-block

display常用以上四个属性值，none 是元素隐藏，且不占有位置。block  除了转换为块级元素之外，同时还有显示元素的意思。inline 和inline-block 分别是显示为行内元素和行内块元素。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 200px;

            height: 200px;

            margin: 0;

        }

        div:first-child {

            background-color: aqua;

        }

        div:nth-child(2) {

            background-color: red;

            display: none;

        }

        div:last-child {

            background-color: pink;

        }

    </style>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

</body>

</html>

可以发现红色的div 消失且不占有位置，粉色的自动补上去。

2、visibility: hidden|visible 

visibility 隐藏时原有的位置还会占有，不会消失

将1中的display：none ； 改为 visibility: none;结果如下图所示

可以发现红色额的div 虽然消失了，但是原有的位置还是占有的。

3、overflow: visible | auto | hidden | scroll   

overflow只要是用来对超出盒子指定大小的内容做处理。

visible 是默认值，及不剪切内容也不添加滚动条。

auto 是有超出部分就添加滚动条，没有超出的部分就不添加滚动条。

hidden 是超出的部分被剪切，不显示。

scroll 是不管内容有没有超出大小，都添加滚动条。

CSS 小结笔记之元素的隐藏与显示的更多相关文章

  1. CSS 小结笔记之解决flex布局边框对不齐

    在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...

  2. CSS 小结笔记之浮动

    在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...

  3. 如何使用T-SQL备份还原数据库及c#如何调用执行？ C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一） span<T>之高性能字符串操作实测

    如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...

  4. js 原生： 身份证脱敏、唯一随机字符串uuid、对于高 index 元素的隐藏与显示

    1. 对于高 index 元素的隐藏 与 显示 export const hideIndexEle = (cssStr)=>{ const player = getElementsByCss(c ...

  5. jquery控制元素的隐藏和显示的几种方法。

    组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#i ...

  6. jquery控制元素的隐藏和显示的几种方法

    使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 方法一 显示: $("#id").show()表示为display:block, 隐藏: $("#id&q ...

  7. js 判断某个元素是否隐藏或显示

    //判断某个元素是否显示 true:是 false:不是 var isVisible = $('#myDiv').is(':visible'); //判断某个元素是否隐藏 true:是 false:不 ...

  8. CSS 小结笔记之清除浮动

    浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head ...

  9. CSS学习笔记之元素分类

    在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div> ...

随机推荐

  1. (转)Db2数据库一次生产故障详细记录---数据库坏页

    原文:http://www.talkwithtrend.com/Article/216335 前言 数据库最严重的故障莫过于数据库损坏.数据库坏页是数据库损坏的一种,如果数据库中有数据页出现损坏,在没 ...

  2. HttpComponents组件探究 - HttpClient篇

    在Java领域,谈到网络编程,可能大家脑海里第一反应就是MINA,NETTY,GRIZZLY等优秀的开源框架.没错,不过在深入探究这些框架之前,我们需要先从最original的技术探究开始(当然,需要 ...

  3. python中如何使输出不换行

    1.在python 2.x版本中,使用“,”(不含双引号)可使输出不换行,例如 2.python 3.x版本输出不换行格式如下 print(x, end="")    end=&q ...

  4. pointer-events/H5页面在iphone6 plus的微信上出现闪退

    一.pointer-events 1.元素加上pointer-events:none后,在js中加点击事件不好使 原因:pointer-events:none关闭所有点击事件,包括js总的 解决:删掉 ...

  5. unity 图片变纯色填充

    unity自带shader 即可

  6. java学习-zxing生成二维码矩阵的简单例子

    这个例子需要使用google的开源项目zxing的核心jar包 core-3.2.0.jar 可以百度搜索下载jar文件,也可使用maven添加依赖 <dependency> <gr ...

  7. 使用Java设计验证码生成程序

    我们来设计一个简单的验证码生成程序:验证码一个由4位的数字.字母随机组合而成图像,为了避免被光学字元识别(OCR,Optical Character Recognition)之类的程序识别出图片中的数 ...

  8. nginx 学习笔记(1) nginx安装

    1.nginx安装 根据操作系统的不同,nginx的安装方式也不相同. 1.1 对linux系统来说,nginx.org提供了nginx安装包.http://nginx.org/en/linux_pa ...

  9. c#基础学习(0719)之异常处理

    异常处理的一般代码模式 try { //可能发生异常的代码 //当try中某行代码发生异常后,从该行代码开始,后面的代码都不会继续执行, //程序直接跳转到catch块中进行执行 } catch (E ...

  10. SQL Server数据类型转换方法

    在SQL Server日常的函数.存储过程和SQL语句中,经常会用到不同数据类型的转换.在SQL Server有两种数据转换类型:一种是显性数据转换:另一种是隐性数据转换.下面分别对这两种数据类型转换 ...