CSS笔记-元素的隐藏(display与visibility)

最新推荐文章于 2024-09-10 18:37:52 发布

Green8y0

最新推荐文章于 2024-09-10 18:37:52 发布

阅读量172

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/init_8y0/article/details/114757154

版权

这篇CSS学习笔记探讨了元素隐藏的两种方法——display: none;和visibility: hidden;。通过示例代码和效果展示，解释了display: none;会移除元素占用的空间，而visibility: hidden;则保留了元素的空间但使其不可见。

摘要由CSDN通过智能技术生成

文章目录

前言
一、原状态的CSS
- 1. 原状态的CSS代码：
- 2. 原状态的效果：
二、display: none;的CSS
- 1. display: none;的CSS代码：
- 2.display: none;的效果(.vis盒子覆盖了.dis盒子的位置)：
二、visibility: hidden;的CSS
- 1. visibility: hidden;的CSS代码：
- 2.visibility: hidden;的效果(.dis盒子隐藏了,但位置保留了)：
总结

前言

CSS学习笔记-元素的隐藏(display与visibility)

3个状态均使用同一HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>元素的隐藏(display与visibility)</title>
</head>
<body

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Green8y0

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

display:none、visibility:hidden和opacity:0之间的区别

github_39673115的博客

09-10

1万+

一、空间占据 display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。代码： div { width: 200px; height: 200px; background: #ccc; margin-top: 10px; } .div1

【乔二参】CSS Display(显示) 与 Visibility（可见性）详解

2302_79483741的博客

06-12

410

在CSS中，display属性决定了元素如何在页面上布局，以及元素如何与其他元素进行交互。它定义了元素在页面流中的类型和行为。visibility属性用于控制元素是否可见，但它与不同。即使元素不可见，它仍然会占据页面空间。display属性控制元素的布局方式和在页面流中的行为。visibility属性控制元素的可见性，但不改变元素在页面上的布局或占据的空间。在实际开发中，根据需要选择使用display或visibility属性来达到期望的页面效果。

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

CSS中Display（显示）和Visibility（可见）

Z_CH8648的博客

11-24

1455

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

css中显示模式转换(display)

Katie_fly的博客

08-19

507

1、块转行display: inline; 2、行转块display: block; 3、行内元素转行内块display: inline-block;

CSS中的display与visibility

前端学习博客

01-17

410

文章目录一.display: none二.visibility: hidden三.opacity: 0四.`display: none`与`visibility: hidden`的区别五.元素隐藏方法总结：一.display: none DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；事件监听：无法进行 DOM 事件监听；性能：动态改变此属性时会引起重排，性能较差；继承：不会被子元素继承，毕竟子类也不会被渲染； transition：transition 不支持

CSS元素的显示与隐藏（display、visibility、overflow）

weixin_52625590的博客

08-02

499

思考一个问题：很多网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现，这是什么导致的呢？如何做到让一个元素在页面中消失或者显示出来？

CSS隐藏元素 display visibility opacity的区别.docx

07-24

在CSS中，隐藏元素的方法主要有三种：`display:none`、`visibility:hidden`和`opacity:0`，它们各自有不同的特点和适用场景。 1. `display:none`：此属性会使元素完全从页面布局中消失，不占据任何空间。元素及其...

前端学习笔记：显示隐藏元素display、visibility及overflow的使用

weixin_43339892的博客

12-31

557

显示隐藏元素的使用 1、display 属性 /* 元素隐藏 display隐藏元素后，不再占有原来的位置*/ display: none; /* 元素出现 */ display: block; 2、visibility 属性 /* 元素隐藏 visibility隐藏元素后，继续占有原来的位置*/ visibility: hidden; /* 元素可视 */ vi

【CSS基础学习笔记】定位、元素的显示与隐藏

aaatool的博客

06-07

322

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。（例如“回到顶部”按钮）定位 = 定位模式 + 边偏移定位模式决定了元素的定位方式，通过position属性设置，分为4个。static（静态定位）默认定位，即无定位，按照标准流特性摆放。relative（相对定位）元素是相对于原来的位置移动的。原来在标准流的位置也继续占有，后面的盒子仍然以标准流的方式对待它。 absolute（绝对定位）

笔记-day07-前端基础CSS第五天.pdf

10-11

3. **文本属性**：这部分属性与元素内的文本样式有关。首先是`color`设置文本颜色，`font`定义字体家族、大小、样式等，`text-decoration`添加下划线、删除线等装饰，`text-align`调整文本对齐方式，`vertical-align...

display和visbility的区别

成大事者，须综理密微。

04-12

2290

visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。例： function toggleVisibility(me){ if (me.style.visibility=="hidde

DIV隐藏的2种方式(一种保留位置，一种不保留位置)

qq_39071667的博客

11-12

7153

第一种，保留位置 style="visibility:hidden;" js控制显示与隐藏 document.getElementById("id").style.visibility="";//隐藏 document.getElementById("id").style.visibility="hidden";//显示第二种，不保留位置 style="dispaly：none;.

vis.js力导向图第五弹——隐藏节点

toBeMN的博客

11-19

2543

正经学徒，佛系记录，不搞事情基于上文：https://blog.csdn.net/qq_31748587/article/details/84143153 的项目通过复选框动态控制节点的展示（节点隐藏会自动隐藏关系，但节点还是存在于图中，只是隐藏了）首先随意创建节点和关系隐藏C类实现方法： html 显示节点 <input type="checkbox" n...

CSS 基础之Display与 Visibility属性

devin_xin的博客

03-25

209

CSS display 属性和 visibility属性都可以用来隐藏某个元素。 visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，仍然会影响布局。 display:none也可以隐藏某个元素，且隐藏的元素不会占用任何空间，该元素原本占用的空间也会从页面布局中消失。利用Display来改变块和内联元素显示方式块元素 h1-h6 p div 会占用...

css的选择器有哪些？权重由大到小是怎么排序的？