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

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. 腾讯云域名申请+ssl证书申请+springboot配置https

    阿里云域名申请 域名申请比较简单,使用微信注册阿里云账号并登陆,点击产品,选择域名注册 输入你想注册的域名 进入域名购买页面,搜索可用的后缀及价格,越热门的后缀(.com,.cn)越贵一般,并且很可能 ...

  2. 【链表】Insertion Sort List

    题目: Sort a linked list using insertion sort. 思路: 插入排序是一种O(n^2)复杂度的算法,基本想法相信大家都比较了解,就是每次循环找到一个元素在当前排好 ...

  3. android Butter Knife 使用详解

    Butter Knife github连接:https://github.com/JakeWharton/butterknife 本文使用的butterknife版本7.0.1 butterknife ...

  4. 【原】Ubuntu ATI/Intel双显卡 驱动安装

    本文只针对含有AMD双显卡的部分机型,已经测试过的包括DELL Vostro 3550/DELL Inspiron 14R (AMD 6630 和 Intel HD 3000).整个安装过程需要使用命 ...

  5. Go pprof和火焰图

    Profiling 在计算机性能调试领域里,profiling 就是对应用的画像,这里画像就是应用使用 CPU 和内存的情况.也就是说应用使用了多少 CPU 资源?都是哪些部分在使用?每个函数使用的比 ...

  6. logback 日志打印输出

    slf4j 其实是一个日志的抽象层, 其本质仍然需要真正的实现 他可以解决代码中独立于任意特定的日志类库, 可以减少很多维护日志的麻烦, 除此之外, 还有占位符的特性, {}, 类似于String#f ...

  7. 机器学习入门学习笔记：（一）BP神经网络原理推导及程序实现

    机器学习中,神经网络算法可以说是当下使用的最广泛的算法.神经网络的结构模仿自生物神经网络,生物神经网络中的每个神经元与其他神经元相连,当它“兴奋”时,想下一级相连的神经元发送化学物质,改变这些神经元的 ...

  8. 深入SpringBoot:自定义Endpoint（转）

    本文转自:https://www.jianshu.com/p/9fab4e81d7bb 最近在研究改写actuator的方式,这些放这里已备忘 Endpoint SpringBoot的Endpoint ...

  9. [笔记] Python 图片转字符画

    一.介绍 用Python 代码完成图片转字符画 二.python 环境 Python 3.6.6 pillow 5.1.0  Python 图像处理库, 需要另外安装 三.原理 gray ＝ 0.21 ...

  10. BEA-141150 - An error occurred while preparing application component uri of application application with HTTP response responseCode: message

    网上查询的 Cause:This is either because the resource it self is not available on the administration serve ...