CSS Display(显示) 与 Visibility（可见性）

最新推荐文章于 2023-03-28 15:10:59 发布
原创 最新推荐文章于 2023-03-28 15:10:59 发布 · 701 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html #布局

本文介绍了两种CSS技巧：使用visibility:hidden使元素保持原位置但不可见；使用display:none完全移除元素及其所占空间。这两种方法在网页布局调整中有不同的应用场景。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局

隐藏不释放空间；


display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

隐藏释放空间；

CSS元素的显示与可见性（详解Display和Visibility的用法）
百赢出品，必属精品
05-03 5614
1.DisplayDisplay主要用于控制元素的布局方式，包括块级、行内、弹性布局和网格布局等。Visibility主要用于控制元素的可见性，即元素是否在页面中可见，但不影响布局。display属性display属性用于定义元素应该生成的框的类型。常见的display属性值包括：none: 元素不会被渲染在页面上，且不占据空间。block: 元素被渲染为块级元素，占据一整行。inline: 元素被渲染为内联元素，不会独占一行，与其他内联元素在一行内显示。
CSS中display和visibility的区别
最新发布
低代码布道师的博客
10-31 591
在 CSS 中，display 和 visibility 是两个用于控制元素显示和布局的属性，但它们的作用和效果是不同的。
css中 display属性和visibility的区别
请移架http://blog.sina.com.cn/u/2765457197
04-24 517
 display Property ValuesValueDescriptionnoneThe element will generate no box at allblockThe element will generate a block box (a line break before and after the element)
隐藏元素后占的空间没有改变
qq_22978533的博客
09-07 928
display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用 visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失（看不见也摸不到）。 ”这样的解释。 但是我觉得并不够，所以就想了一下关于他的一
CSS隐藏元素的属性有哪些?
charlie________的博客
03-28 637
需要注意的是，这些属性的使用都有其适用的场景和注意事项。例如，如果使用 display: none;隐藏一个元素，那么该元素将不会被渲染，也不会被屏幕阅读器识别，因此在使用时需要注意可访问性问题。在 HTML 和 CSS 中，隐藏元素的属性有多种。：将元素移动到屏幕外面，不占据任何空间。：将元素变为透明状态，但仍占据空间。：将元素完全隐藏，不占据任何空间。：将元素隐藏，但仍占据空间。
CSS之隐藏Div属性
绣花针
12-25 2619
1.占据空间隐藏,看到的是空白 style="visibility: hidden;"//隐藏 style="visibility: visible;"//显示 2.不占空间隐藏  style="display: none;"//隐藏 style="display: block;"//显示  ...
巧用css属性隐藏HTML元素
weixin_30507269的博客
07-07 178
最近发现博客园可以自定义博客页样式,就想把多余的侧边栏,footer,博客信息隐藏起来,想到了几种办法,在此总结一下: visibility: hidden; 设置visibility: hidden;但是模块实际还是占版面的,浏览器一样会对齐进行渲染. opacity:0; 透明度为0同样可以隐藏模块,同visibility一样,通过透明隐藏...
CSS Display与Visibility的不同
09-27
在CSS布局中，`display`和`visibility`是两个非常重要的属性，它们分别负责控制元素的显示方式和可见性。虽然两者都能使元素在页面上不可见，但它们的机制和影响是不同的。 首先，`visibility`属性主要用于决定元素...
css中display和visibility的用法和区别介绍
12-11
在CSS中，`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态，但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值： 1. `block`：将元素转换为...
[css] 元素的隐藏和显示
adisMadman的博客
04-20 602
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新界面，会重新出现！ 本质：让一个元素在页面中隐藏或者显示出来。 一：display属性 display属性用于设置一个元素应如何显示： display：none；隐藏对象 display：block；除了转换为块级元素以外，同时还有显示元素的意思 display隐藏元素后，不再占有原来的位置 二：visibility可见性 visibility属性用于指定一个元素应可见还是隐藏 visibility：visible；元素可视 visib
CSS中各种隐藏元素属性
TIANCHUANG8887的博客
02-25 280
opacity:0; //隐藏，但是还是占据原来的位置，隐藏的元素，依旧能触发事件 filter:alpha(opacity=0) //和opacity作用一样，只是兼容IE； display:none; //消失，不占据位置，不能设置transition过渡效果 visibility：h...
CSS中常见隐藏元素的属性
weixin_45371730的博客
08-17 446
visibility：hidden 隐藏元素本身，并且在网页中 占位置 display：none 隐藏元素本身，并且在网页中 不占位置（常用） overflow：hidden 隐藏超出盒子的内容部分（超出的内容虽隐藏但占位） 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatib.
CSS中元素的隐藏和显示(visibility, display)
旷野之路
11-27 1412
 visibility: hidden, visible display: block, inline, none visibility: 控制页面元素的显示和隐藏，不空值元素的位置特征。 document.getElementById("div").style.visibility = "hidden"; //隐藏元素document.getElementById("di
CSS—显示属性
有道无术，术尚可求，有术无道，止于术。
01-27 497
显示 显示方式 display常用显示方式  属性 display 取值 none：让生成的元素不显示 - 隐藏 特点： 脱离文档流   block：让元素表现的和块级元素一样 特点：独占一行、允许修改尺寸、允许正常处理垂直方向的外边距           inline： 让元素表现的和行内元素一样  特点：多个元素一行...
隐藏元素的三个属性，以及他们的区别
qq_41938120的博客
03-12 677
隐藏元素 1.display：none 2.opacity：0 3.visibility:hidden 三种方法都可以从视觉上隐藏元素，但是他们之间是有区别的。 例子 //基础样式 .demo{ width: 100px; height: 100px; background-color: red; } .test{ width: 100px; height: 100px; background-c...
css-元素的显示和隐藏
qq_39111074的博客
05-07 247
元素的显示和隐藏方法 元素的显示和隐藏可以使用这3种css属性：visibility、display、overflow 示例代码1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
CSS-显示属性
一条大河
09-21 1006
1， 显示方式 1， 什么是显示方式 决定了元素是以什么样的方式显示在网页中；（块级/行内/行内块） 2， 语法结构 属性：display 取值： 1, none 让元素不显示 - 隐藏 脱离文档流，不占据页面空间 2，block ...
两种隐藏属性
唐国童
07-16 1315
1.visiblity:hidden仅仅隐藏内容,该元素所占位置依然存在 2.display:none,不仅隐藏内容,而且不占位置 Display还可以设置元素的显示模式 Inline值可以将块级元素以内联元素的形式显示此时width和height属性无效,其空间取决于元素的内容 Inline-block值可以将块级元素以内联元素的形式显示,同时兼具块级元素的某些特征,比如可以
掌握HTML&CSS核心属性：display、visibility与overflow
在HTML与CSS的学习过程中，`display`属性是一个非常核心的属性，它用于定义元素的显示方式。`display`属性有多种不同的值，每种值控制元素以不同的方式展现： 1. **block**：表示元素将显示为块级元素，独占一行，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

二十六画生的博客

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值