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

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. windows server 2016安装docker

    最近微软发布了windows server 2016,并原生支持docker,本文通过一系列的步骤,来学习怎么在windows server 2016安装docker. 1.下载 windows se ...

  2. PHP 批量获取 百度搜索结果 网址列表

    <?php set_time_limit(0); function curl($url){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $u ...

  3. C/C++ -- Gui编程 -- Qt库的使用 -- 标准对话框

    -----mywidget.cpp----- #include "mywidget.h" #include "ui_mywidget.h" #include & ...

  4. ActiveMQ消息持久化到Mysql数据库

    1.把连接MySQL数据库的jar文件,放到ActiveMQ的lib目录下 2.修改ActiveMQ的conf目录下的activemq.xml文件,修改数据持久化的方式2.1 修改原来的kahadb的 ...

  5. TemplateBinding和Binding的区别

    定义 TemplateBinding是为了某个特定场景优化出来的数据绑定版本--需要把ControlTemplate里面的某个Property绑定到应用该ControlTemplate的控件的对应Pr ...

  6. 术语CDATA，其实可以理解为一种特殊的转移字符

    参考:http://www.w3school.com.cn/xml/xml_cdata.asp 常见于XML文档,所有 XML 文档中的文本均会被解析器解析. 只有 CDATA 区段(Charact ...

  7. PLSQL计算质数

    看到有人实现了一个计算质数的函数,就是效率有点差,贴一个以前写的计算质数的算法. 目标很简单,列出100以内的质数.其实算法很简单,两个循环就搞定了.但是发现使用不同的算法,执行效率差别之大相当惊人, ...

  8. elasticSearch6源码分析(1)启动过程

    1.找到bin目录,下面有elasticSearch的sh文件,查看执行过程 exec \ "$JAVA" \ $ES_JAVA_OPTS \ -Des.path.home=&qu ...

  9. Extjs相关知识点梳理

      store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表 方法:不列举继承来的方法 Store( Object config ) 构造,config定义为{ autoLo ...

  10. SQL查询几种的区别。

    最近看了几篇SQL查询的文章做一下总结哦,大概简记如下: SQL查询的实质是,是指从数据库中取得数据的子集,可以先取列子集,然后再取符合条件的行子集. 1.单表查询: SELECT [Name] ,[ ...