<!DOCTYPE html>

<html lang="en">

  <head>

    <style>

      body {

        width: 100vw;

        height: 100vh;

        margin: 0;

        box-sizing: border-box;

      }

      .container {

        width: 400px;

        background-color: antiquewhite;

        height: 300px;

        /* 不改变位置隐藏 */

        display: none;

        visibility: hidden;

        opacity: 0;

        filter: opacity(0%);

        width: 0;

        transform: scale(0);

        /* 添加伪元素 */

        /* 移动到视野外 */

        margin-left: -100px;

        transform: translateX(-100%);

        position: relative;

        top: -100%;

      }

      .hidden {

        position: relative;

      }

      .hidden::after {

        content: " ";

        display: block;

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        z-index: 1000;

        background-color: white;

      }

    </style>

  </head>

  <body>

    <div class="container hidden">Hello I'm container</div>

  </body>

</html>

使用css让盒子在视野消失！n种方法！的更多相关文章

  1. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  2. Css三栏布局自适应实现几种方法

    Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

  3. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. CSS 去掉inline-block元素间隙的几种方法

    最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...

  5. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  6. css清除浮动大全，共8种方法

    我看的网页的网址:http://hi.baidu.com/kongcheng2012/item/2b1250d4452e802538f6f705 为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效 ...

  7. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  8. css隐藏元素的六类13种方法

    隐藏元素的方法 隐藏元素的方法可以总结为六类:直接隐藏.对溢出内容隐藏.对元素透明度进行调整.将元素移除当前屏幕.对元素的层级关系进行调整.对元素进行裁剪 只有对元素的透明度进行调整才可以点击,其余都 ...

  9. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  10. CSS实现下拉菜单的几种方法

    PS:转自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一种:display:none和display:block切换 1 <!DOCTY ...

随机推荐

  1. 使用redis的stream数据类型做消息队列

    在redis5.0之前,如果想使用它作为简单的消息队列,最好的选择就是自身提供的pub/sub模式.它支持简单的发布/订阅模式,发布一个channel绑定一条消息,然后可以有多个消费者监听这个chan ...

  2. CODING DevOps服务下线，受影响企业何去何从？如何进行迁移？

    前两天CODING DevOps宣布产品下线,建议标准版用户2025年9月1前完成迁移.付费版用户2028年9月30日前完成数据迁移.有点突然,但也不意外,我是接触Coding最早的用户,经常作为学习 ...

  3. laravel项目上传Linux服务器

    第一次上传项目:记录一下遇到的问题!!! #1)工具:腾讯云服务器and域名(以解析) Xshell(强大的安全终端模拟软件) 链接:https://pan.baidu.com/s/1we6dw5ys ...

  4. C# 关于 &符号，字符串转字典Dictionary<string, string>

    private static Dictionary<string, string> ParseToDictionary(string str) { Dictionary<string ...

  5. EVE-NG 修改QEMU的镜像

    首先先要建立一个lab,然后添加并启动一台QEMU的设备. 我用的是XRV9K.然后进行一些配置后,保存配置并关闭设备. 进入到这文件夹,这就是我的这台设备的文件夹. root@eve-ng:/opt ...

  6. python 读取excel表格中的数据

    简介 RT 参考链接 https://www.cnblogs.com/ilovepython/p/11068841.html

  7. ERP系统是什么？ERP系统如何与数据库对接？

    ERP系统的定义 1.企业ERP系统标准的定义来自于其英文原意,即企业资源规划(Enterprise Resource Planning).企业资源计划系统是一种集成的软件系统,旨在帮助企业管理其资源 ...

  8. ARM Cortex-M3/M4初学习（未完待续）

    ARM Cortex-M3/M4初学习 0. 架构与核心特性 0.1 指令集架构 基于ARMv7-M架构,支持Thumb-2指令集(混合16/32位指令集) 基于哈佛架构,数据和指令分布存储在独立的空 ...

  9. Economic-Assets-Allocation&Management: 资产配置+管理：标准普尔家庭资产配置图：家庭理财的科学指南

    Economic-Assets-Allocation&Management: 资产配置+管理: 标准普尔家庭资产配置图:家庭理财的科学指南 发表时间:2025-05-28 10:19:43 在 ...

  10. Probability•概率的公理化定义•确定概率的方法{频率, 古典, 几何, 主观}•Joseph Louis Bertrand贝特朗奇多解论源于概率建模及其样本空间可有多种假设

    Probability 概率的公理化定义 非负性 正则性 互不相容的可列可加性 确定概率的方法(一审题,二确定样本空间&Omega, 三确定事件集合, 四求解): 频率 抛硬币正面朝上次数: ...