CSS中 ,有哪些方式可以隐藏页面元素

文章目录

    • CSS中 ,有哪些方式可以隐藏页面元素
    • 实现方式
    • display:none
    • visibility:hidden
    • opacity:0
    • 设置height 、width属性为0
    • position:absolute
    • clip-path
    • 小结

CSS中 ,有哪些方式可以隐藏页面元素

实现方式

通过 css 实现隐藏元素方法有如下 :

  • display:none
  • visibility:hidden
  • opacity:0
  • 设置height 、width属性为0。
  • position:absolute
  • clip-path

display:none

元素本身占有的空间就会被其他元素占有 ,也就是说它会导致浏览器的重排和重绘
消失后, 自身绑定的事件不会触发 ,也不会有过渡效果
特点 :元素不可见 , 不占据空间 , 无法响应点击事件

visibility:hidden

从页面上仅仅是隐藏该元素 , DOM结果均会存在 , 只是当时在一个不可见的状态 , 不会触发重排
会触发重绘
给人的效果是隐藏了 ,所以他自身的事件不会触发
特点 :元素不可见 , 占据页面空间 , 无法响应点击事件

opacity:0

属性表示元素的透明度 ,将元素的透明度设置为。后 ,在我们用户眼中 ,元素也是隐藏的

如果利用 animation 动画 , 对 。pacity 做变化 (animation会默认触发GPU加速) 则只会触发 GPU
层面的 composite , 不会触发重绘

特点: 改变元素透明度 , 元素不可见 , 占据页面空间 , 可以响应点击事件

设置height 、width属性为0

将元素的 margin border padding height 和 width 等影响元素盒模型的属性设置成 0 ,

1  .hiddenBox {
2       margin:0;
3       border:0;                                            
4       padding:0;	
5       height:0;
6       width:0;	
7       overflow:hidden;		
8   }

特点 :元素不可见 , 不占据页面空间 , 无法响应点击事件

position:absolute

1  .hide {
2      position: absolute;
3	top: -9999px;
4	left: -9999px;
5	}

特点 :元素不可见 , 不影响页面布局

clip-path

.hide {clip-path: (0px,0px	0px,0px	0px,0px	0px);
}

特点 :元素不可见 , 占据页面空间 , 无法响应点击事件

小结

display:none visibility:hidden 用途并不是用于隐藏元素 , 所以并不推荐使用它们

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/731444.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Testing Library - 简介

testing-library 软件包系列以用户为中心的方式帮助您测试 UI 组件。 你的测试越接近你的软件使用方式,它们能给你提供的信心就越多。 核心库 DOM Testing Library,是一个轻量级的解决方案,用于通过查询和与DOM节点(无论是使用JSD…

【面试准备日常】从头复习mysql--20240308

1.mysql数据类型 a.数值类型 分类类型大小有符号(SIGNED)范围无符号(UNSIGNED)范围描述数值类型TINYINT1 byte(-128,127)(0,255)小整数值SMALLINT2 bytes(-32768,32767)(0,65535)大整数值MEDIUMINT3 bytes(-8388608,…

[蓝桥杯]接龙数列(C语言)

目录 题目链接 题目理解 解题思路 完整代码 重难点解答 *dp数组的具体用法 *对于dp[b]dp[a]1>dp[b]?dp[a]1:dp[b]的解释 题目链接 [蓝桥杯 2023 省 B] 接龙数列 - 洛谷 题目理解 这道题让我们求任给的一串数字,若想让其变成接龙数列最少需要删除的数字…

【程序员经常使用的算法】讲解

程序员经常使用的算法 程序员经常使用的一些算法包括: 1. 排序算法(Sorting Algorithms): 冒泡排序(Bubble Sort)选择排序(Selection Sort)插入排序(Insertion Sort)归…

uniapp列表进入动画

app列表入场动画 - DCloud 插件市场 列表入场动画https://ext.dcloud.net.cn/plugin?id16957

中医把脉笔记

目录 寸关尺对应的五脏六腑自己给自己把脉把脉五布法定寸关尺分浮中沉分快慢辨阴阳看虚实 参考文章 寸关尺对应的五脏六腑 自己给自己把脉 up主道道总是睡不着的把脉教学视频 用中指按住小骨头下面一点,这是关脉,左手的关脉对应肝脏。 把脉五布法 定…

网络基础aaa

三次握手 四次挥手 网络模型 TCP or UDP 的特点 如何理解 TCP 的5层协议 TCP的5层协议是指计算机网络体系结构中,与TCP(传输控制协议)相关的五个层次。这五个层次从高到低依次是:应用层、传输层、网络层、数据链路层和物理层。每…

java注释的详尽解析

一、什么是注解 (1).注解的作用 ①:注解一般用于对程序的说明,就像注释一样,但是区别是注释是给人看的,但是注解是给程序看的。 ②:让编译器进行编译检查的作用,比如下边这个Override注解是重写的意思&am…

前端缓存使用规范

一、Cookie使用规范 cookie的存储空间非常有限且会携带在请求头中会浪费不必要的流量,如果仅仅是为存储数据,可以采用其他替代方案,例如 webStorage,非必要不使用cookie。 1、使用方法 注意:过期时间时需转换成UTC格…

内存安全的编程语言

美国政府新颁布《回归基础构件:通往安全软件之路》 《回归基础构件:通往安全软件之路》中,白宫国家网络主任办公室(ONCD)呼吁开发者使用「内存安全的编程语言」 内存安全的编程语言 根据NSA的建议,内存…

sqlyog社区版下载,数据库客户端,mysql

Downloads webyog/sqlyog-community Wiki GitHubhttps://github.com/webyog/sqlyog-community/wiki/Downloadssqlyog社区版下载

liteIDE 解决go root报错 go: cannot find GOROOT directory: c:\go

liteIDE环境配置 我使用的liteIDE为 x36 5.9.5版本 。在查看–>选项 中可以看到 LiteEnv,双击LiteEnv ,在右侧选择对应系统的env文件,我的是win64系统,所以文件名为win64.env 再双击 win64.env ,关闭当前窗口&…

git 初始化项目并上传到github

如果还没配置过,需要配置账号信息 git config --global user.name "baymax-collab" git config --global user.email "baymax-collabtest.com"创建一个新的存储库 git clone gitgithub.com:xxxx cd test git switch --create main touch READ…

C++ Qt开发:QHostInfo主机地址查询组件

Qt 是一个跨平台C图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用QHostInfo组件实现对主机地址查询功能…

ROS——VirtualBox下载

下载&安装Virtualbox Oracle VM VirtualBox 根据电脑系统版本下载。 注意:前提是电脑cpu要开启虚拟化 根据自己的需求下载 双击开始安装 浏览可以更改下载位置,默认在C盘 然后一直点,是或下一步就好了 下载拓展包 后续需要连接使…

NASA数据集——GOES-16卫星的高级图像和地球观测数据

简介 GHRSST NOAA/STAR GOES-16 ABI L2P America Region SST v2.70 dataset in GDS2 ABI_G16-STAR-L2P-v2.70是美国国家航空航天局(NASA)的一种卫星数据处理产品。这个产品是由GOES-16(也称为GOES-East)卫星的先进基线/全球地球…

201909青少年软件编程(Scratch)等级考试试卷(三级)

青少年软件编程(Scratch)等级考试试卷(三级)2019年9月 第1题:【 单选题】 执行下面的脚本后,变量“分数”的值是多少?() A:5 B:6 C:10 D:25 【正确答案】: C 【试题…

Day3 DOM-节点操作

3.1 节点 节点:标签、文本、注释、换行等,节点类型nodeType、节点名称nodeName、节点值nodeValue 元素:标签 节点层级:父节点、子节点、兄弟节点 parentNode父节点的最大节点是document,再朝上查找就是null prentElem…

2024年华为OD机试真题-提取字符串中的最长数学表达式并计算-Java-OD统一考试(C卷)

题目描述: 提取字符串中的最长合法简单数学表达式,字符串长度最长的,并计算表达式的值。如果没有,则返回0 简单数学表达式只能包含以下内容 0-9数字,符号 +-* 说明: 1. 所有数字,计算结果都不超过long 2. 如果有多个长度一样的,请返回第一个表达式的结果 3. 数学表达式…

day18_支付宝支付项目部署(保存支付信息,支付接口,支付宝异步回调)

文章目录 1 支付1.1 需求说明1.2 支付宝支付1.2.1 产品介绍产品特色使用示例申请条件费率 1.2.2 接入准备1.2.3 手机网站支付快速接入1.2.4 官方demo研究 1.3 环境搭建(service-pay)1.4 后端接口1.4.1 保存支付信息实现流程说明查询订单接口开发openFeign接口定义代码实现添加依…