怎么让一个div消失在视野里
怎么让一个div消失在视野里
视野内隐藏
1.设置高度宽度为0
div {
height: 0;
width: 0;
}
2.设置透明度为0
div {
opacity: 0;
}
3.设置display
,让其消失在渲染树中
div {
display: none;
}
4.设置visiblity
来改变可见
div {
visibility: hidden;
}
5.缩放
div {
transform: scale(0);
}
6.旋转
div {
transform: rotateX(90deg); /*X/Y均可*/
}
div {
transform: skewX(90deg); /*X/Y均可*/
}
2、3、4三种方案的区别
display: none;
直接将元素块在渲染树中删除,不进行渲染,后面的div会补上这一部分位置visibility: hidden;
只是将元素隐藏,但是所在位置还是被占着的,不会影响整体布局opacity: 0;
设置透明度为0,实际元素还在那个位置,而且可点击- vue中的
v-if
和v-show
的区别和display
与visiblity
的区别一样
移动到视野外
1.负margin
div {
margin-top: -9999px; /*top/right/bottom/left均可*/
}
2.绝对/相对定位
div {
poititon: absolute;
top:-100%; /*top/right/bottom/left均可*/
}
3.transform
div {
transform: translateX(-9999px); /*X/Y均可*/
}
4.z-index
div {
poititon: absolute;
z-index: -1
}
怎么让一个div消失在视野里的更多相关文章
- 让元素div消失在视野中
让元素div消失在视野中1.position:absolute/relative/fixed + 方位 top/bottom/left/right: -9999px2.display:none3.vi ...
- Div中嵌套一个div,怎么是里面的div居中?
盒子居中是在写样式中经常遇到的问题,在这里说个我经常使用的方法~ 利用绝对定位:
- 如何让一个div里面的div垂直居中?
如何让一个div里面的div垂直居中? 如何让上面灰色有文字那个div和背景图标垂直居中,不管屏幕大小有好大,始终在垂直方向上的中间.上面有整个布局和样式表,谢谢高手指点 CSS3时代当然要用CSS3 ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- HTML4如何让一个DIV居中对齐?float输入日志标题
float:left,right clear:both 如何让一个DIV居中对齐? 第一步:设置外层的DIV的text-align:center; 第二步:设置里层的DIV的margin:auto 以 ...
- JaveWeb 公司项目(1)----- 使Div覆盖另一个Div完成切换效果
最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示: 左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中 ...
- 使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹
使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹,而且div的id命名为id=content,这个和已有id重复 ...
- 一个div多个图表共用一个图例
想实现一个图例(公司名),点击让div中三个图表进行显示相应的数据,并渲染到图表中(公司数据可能很多,让其默认显示三条数据),并且每个图表都有相应的标题和datazoom区域展示,点击下拉框会进行相应 ...
- CSS中div覆盖另一个div
将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 <htm ...
随机推荐
- Solution -「LOCAL」逃生
\(\mathcal{Description}\) 有 \(n\) 个人掉进了深度为 \(h\) 的坑里,第 \(i\) 个人的肩高为 \(a_i\),臂长为 \(b_i\).设当前坑里人的集合为 ...
- suse 12 二进制部署 Kubernetets 1.19.7 - 第11章 - 部署coredns组件
文章目录 1.11.0.部署coredns 1.11.1.测试coredns功能 suse 12 二进制部署 Kubernetes 集群系列合集: suse 12 二进制部署 Kubernetets ...
- java Doc的生成方式
Java Doc Javadoc命令是用来生产自己API文档的 参数信息 @author作者名 @version 版本号 @since 指明需要最早使用的JDK版本 @param参数名 @return ...
- 手把手教你把 Git 子模块更新到主项目
本文以 skywalking-rocketbot-ui子模块合并到 skywalking 为例,手把手教你如何把 Git 子模块更新到主项目中去. 首先,把fork的skywalking项目克隆到本地 ...
- splunk设置索引周期和索引大小
步骤一: 编辑/opt/splunk/etc/apps/search/local/indexs.conf ,在每个索引下面 加入最后两行内容 [messages] coldPath = $SPLUNK ...
- 一个杂项PDF
不是很难,但是就是比较考虑个人的细心程度,下载压缩包解压得到一个pdf文件,直接打开发现没有什么隐藏的信息,准换成word也是,没有什么东西,使用winhex打开看一下,一开始是没有注意到什么的,这里 ...
- elasticsearch算法之搜索模型(一)
面对海量的信息,我们很容易被淹没在信息的海洋中:当我们需要查找某个信息的时候,我们就会输入能够体现我们意图的关键字,搜索引擎会通过解析我们的关键字从而构造相应的查询表示方法:然后搜索引擎通过构造的查询 ...
- Clickhouse - Replication机制
Clickhouse - Replication机制 1. Replication引擎族 Replication仅对于MergeTree引擎族提供支持, 两者是正交的: ReplicatedMerge ...
- C# Semaphore 信号量 锁 简单理解
信号量(Semaphore) Semaphore 一般译作 信号量,它也是一种线程同步工具,主要用于多个线程对共享资源进行并行操作的一种工具类.它代表了一种许可的概念,是否允许多线程对同一资源进行操作 ...
- 【C#表达式树 六】表达式树中创建节点的两种方式
创建表达式树节点的两种方式1.用expression的静态方法MakeBinary|MakeUnary(ExpressionType,参数)的方式创建表达式树节点: BinaryExpression ...