display: none 和 visibility: hidden 区别

最新推荐文章于 2024-06-05 00:48:32 发布

艾斯比的日常

最新推荐文章于 2024-06-05 00:48:32 发布

阅读量59

点赞数

分类专栏： front

本文链接：https://blog.csdn.net/u012745499/article/details/117757953

版权

front 专栏收录该内容

86 篇文章 1 订阅

订阅专栏

                    
                    display: none 和 visibility: hidden 都可以用于隐藏元素
display: none 不再占用原有空间, visibility: hidden 仍然占用原有空间

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

艾斯比的日常

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

display:none和visibility:hidden两者的区别

weixin_43535265的博客

03-09

2191

一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来二、不同点示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi

什么是重绘和回流?display:none和visibility:hidden的区别

频繁记录

06-14

1972

什么是重绘和回流?display:none和visibility:hidden的区别

参与评论您还未登录，请先登录后发表或查看评论

【前端】display:none和visibility:hidden两者的区别

最新发布

06-05

7872

【前端】display:none和visibility:hidden两者的区别

display:none和visibility:hidden区别

m0_47013706的博客

04-06

280

display:none和visibility：hidden区别

display:none和visibility:hidden的区别

杳杳捞到月亮了吗

02-07

905

display:none和visibility:hidden的区别

css display：none和visibility：hidden的区别

郑老狗要推动人类发展

04-01

193

css display：none和visibility：hidden的区别

display:none和visibility:hidden区别？

weixin_48037671的博客

03-19

393

display:none和visibility:hidden区别 1.占位 2.重绘和渲染

display:none和visibility:hidden的差别比较与演示代码

01-19

前言：在使用css隐藏栏位或物件的时候，常常会使用到display:none和visibility:hidden这两个属性，但却很容易分不清楚这两个的差别，或是乾脆同时使用两种属性，来确保物件一定被隐藏，其实我们可以很简单的来...

css元素隐藏原理及display:none和visibility:hidden

09-22

在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...

display:none、visibility:hidden与opacity:0直间到底什么区别（笔试题）

m0_60622481的博客

04-18

295

1、空间占据方面 display:none隐藏后不会占据原有空间，会产生回流和重绘 visibility:hidden和opacity:0元素隐藏，但仍然占据着原有空间，它们俩只会引起页面重绘。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g.

实例详解display:none与visible:hidden的区别

11-27

总结一下，`display:none` 和 `visibility:hidden` 的主要区别在于： - `display:none` 会完全移除元素在布局中的存在，而 `visibility:hidden` 只是让元素变得不可见，但保留其在布局中的位置。 - `display:none` ...

css 的 opacity 属性

艾斯比

06-14

6459

opacity 用于指定元素透明度, 支持 0~1 之间的小数. 默认值 1-完全不透明, 0-完全透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>opacity</title> <style> /* opacity 默认 1, 完全不透明 0 完全透明

浏览器 f12 的 console 功能简介

艾斯比

04-27

4883

在做前端开发时, chrome 浏览器的 f12 功能非常好用, 可以调试 html js css 代码其中 console 标签页表示控制台, 我们可以输入 js 代码, 回车执行常用的命令有 console.log 打印日志 console.count 计数器, 记录执行的次数 console.time 计时, console.timeEnd 停止计时并打印 $() 表示使用选择器获取单个元素, $$() 表示使用选择器获取元素数组 // 打印 log info debug warn erro

js 如何获取对象的动态属性

艾斯比

05-11

4100

js 有两种方式获取对象的属性点语法, 例如 person.name 中括号语法, 例如 person ['name'] 其中, 第一种不能使用变量, 而第二种可以使用变量 let person = { name: 'wj', age: 20 } // 点表示法 // 这里不能使用变量作为对象的属性名 console.log(person.name); // 中括号表示法 // 这里可以传入变量作为对象的属性名 let name = 'name';

js 绑定事件的 3 种方式

艾斯比

04-20

3901

js 作为脚本语言, 可以为页面上的元素绑定事件, 有 3 种方式在 html 中, 声明 onclick 属性, 值为函数调用, 不推荐, html 和 js 耦合, 不利于维护在 js 中, 对元素赋值 onclick 属性, 值为函数声明, 不推荐, 只能赋值一个回调函数, 多次赋值, 之前的会失效在 js 中, 为元素添加 addEventListener, 推荐做法, 可以为一个事件类型绑定多个回调函数 <html> <button onclick="triggerC

js 的 slice 和 splice

艾斯比

05-26

3869

js 的 slice 和 splice 都是数组的方法 slice 不改变原数组 splice 改变原数组 let arr = [1, 2, 3, 4, 5] // slice(start?: number, end?: number): T[]; // start 和 end 表示索引 // slice(start[, end]) [start, end) 左闭右开区间 // 返回值是新的数组, 注意原数组不变 console.log(arr.slice(1, 4)); // spli

js 如何优雅赋值默认值

艾斯比

01-20

3819

我们可以使用 let data = targetValue || defalutValue; 优雅地为变量赋值默认值 let data = { name: '你好鸭' } // 短路或 // 当 data.name 不为 null '' 0, 则表示 false, 那么会返回第二个值. 否则返回 data.name let name = data.name || '默认名字' console.log(name); // 赋值 data.name = null; // data.name 为 null,

js 如何设置定时执行函数

艾斯比

06-04

2899

js 使用 setInterval 函数实现定时执行函数功能 clearInterval 函数停止某个 setInterval 函数的定时 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span class="time"></span

常见的前端打包工具

艾斯比

07-08

2211

grunt gulp webpack