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

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. Vue路由router-link的使用

    Vue路由router-link的使用 相关Html: <!DOCTYPE html> <html lang="en"> <head> < ...

  2. 【Java并发编程】：内存可见性

    加锁(synchronized同步)的功能不仅仅局限于互斥行为,同时还存在另外一个重要的方面:内存可见性.我们不仅希望防止某个线程正在使用对象状态而另一个线程在同时修改该状态,而且还希望确保当一个线程 ...

  3. Javac语法糖之Enum类

    枚举类在Javac中是被当作类来看待的. An enum type is implicitly final unless it contains at least one enum constant ...

  4. alloca() 是什么？为什么不提倡使用它？

    在调用 alloca() 的函数返回的时候, 它分配的内存会自动释放.也就是说, 用 alloca 分配的内存在某种程度上局部于函数的 ``堆栈帧"  或上下文中. alloca() 不具可 ...

  5. PTA (Advanced Level) 1028 List Sorting

    List Sorting Excel can sort records according to any column. Now you are supposed to imitate this fu ...

  6. Maven Debug

    1.在pom.xml中新增plugin <plugin>   <groupId>org.mortbay.jetty</groupId>   <artifact ...

  7. Linux下C语言的调试--转

    调试是每个程序员都会面临的问题. 如何提高程序员的调试效率, 更好更快地定位程序中的问题从而加快程序开发的进度, 是大家共同面对的问题. 可能Windows用户顺口就会说出:用VC呗 :-) , 它提 ...

  8. [转]Global exception handling in Web API 2.1 and NLog

    本文转自:https://stackoverflow.com/questions/25865610/global-exception-handling-in-web-api-2-1-and-nlog ...

  9. python 3.x 爬虫基础---正则表达式

    python 3.x 爬虫基础 python 3.x 爬虫基础---http headers详解 python 3.x 爬虫基础---Urllib详解 python 3.x 爬虫基础---Requer ...

  10. Sqlserver2008及以上使用全文索引排除干扰词

    关于SQLServer2008全文索引干扰词 使用SQL SERVER 2008全文索引进行搜索 contains(Keywords, '"xx of xx*"')  (注意是后面 ...