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

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. (转)python学习笔记5--decimal

    原文:https://blog.csdn.net/lemonwyc/article/details/37583125 上一节提到了除了基本类型之外的decimal,这节就学习下.查看python3.4 ...

  2. (转)Mysql技术内幕InnoDB存储引擎－事务&备份&性能调优

    事务 原文:http://yingminxing.com/mysql%E6%8A%80%E6%9C%AF%E5%86%85%E5%B9%95innodb%E5%AD%98%E5%82%A8%E5%BC ...

  3. Java之IO(十三)File、Filter、Piped、String和InputStreamReader与OutputStreamWriter

    转载请注明原出处:http://www.cnblogs.com/lighten/p/7264196.html 1.前言 断更一段时间,计划果然赶不上变化(还是太懒...).这次一次性将剩余的5组字符流 ...

  4. Java之IO(九)其它字节流

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7063161.html 1.前言 之前的章节已经介绍了java的io包中所有成对(输入.输出对应)的字节流,本章介 ...

  5. Nodejs学习笔记（十一）—数据采集器示例（request和cheerio）

    写在之前 很多人都有做数据采集的需求,用不同的语言,不同的方式都能实现,我以前也用C#写过,主要还是发送各类请求和正则解析数据比较繁琐些,总体来说没啥不好的,就是效率要差一些, 用nodejs写采集程 ...

  6. Mongodb同步数据到hive（二）

    Mongodb同步数据到hive(二) 1.            概述 上一篇文章主要介绍了mongodb-based,通过直连mongodb的方式进行数据映射来进行数据查询,但是那种方式会对线上的 ...

  7. rails常用验证方法

    validates_presence_of       :login,  :message => "用户名不能为空!" validates_length_of         ...

  8. jQuery+Ajax+PHP 制作简单的异步数据传输（测试用户名是否可用）

    实现基本异步数据传输,略去与数据库交换,先直接在PHP端判断:用户名为 user1 即为不可用, 测试时外加了 普遍的 “Loading..." 功能,此功能可直接在PHP中循环延时 for ...

  9. 使用DateTime的ParseExact方法实现特殊日期时间的方法详解（转）

    本篇文章是对使用DateTime的ParseExact方法实现特殊日期时间的方法进行了详细的分析介绍,需要的朋友参考下 今天遇到一个特别的需求,需要从下面的字符串中转换成一个DateTime对象: [ ...

  10. mvc中的action验证登录（ActionFilterAttribute）

    方法一 :  1.创建一个全局action过滤器  (在appstart  的filterconfig中注册   filters.Add(new LoginAttribute());)  2.不需要登 ...