关于块级元素显示与隐藏的三种方式的分享

最新推荐文章于 2024-04-13 19:24:20 发布
最新推荐文章于 2024-04-13 19:24:20 发布
阅读量1.4k 收藏 2
点赞数 2
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44194175/article/details/108628288
版权

块级元素的显示与隐藏

在我们前端开发的过程中，时常遇到块级元素的需要显示和隐藏的这种需求，那么我们一般用什么方式来解决这个问题呢？

1.display:none/block
这种方式元素隐藏之后，不占用原来的位置

2.visibility:hidden/visible
元素隐藏之后，占用原来的位置

3.opcity: 0/1
设置透明度来隐藏，占用原来位置

wind 1024
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于元素的显示与隐藏
weixin_45976564的博客
09-17 1207
元素的显示与隐藏 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现 本质：让一个元素在页面中隐藏或者显示出来 一.display属性（显示隐藏元素，但是不保留位置） display：none ；隐藏对象 display：block；除了转换为块级元素之外，同时还有显示元素的意思 display隐藏元素后，不再占有原来的位置。 后面应用及其广泛，搭配js可以做很多的网页特效 二.visibility可见性（显示隐藏元素，但是保留原来位置） visibility：vis
最全11种方法 css隐藏页面元素 思路不一样，不一定要隐藏
細水、長流√的专栏
03-03 1197
在CSS中很多隐藏元素的方法，但这些方法的可访问性、布局、动画、性能和事件处理的方式有所不同。
将页面元素隐藏的10种方法
jimojianghu的专栏
05-05 4006
在Web开发中，隐藏页面元素使其视觉不可见是一个非常常见的需求。为了实现这一目标，我们通常会采用多种方法，最常用的例如CSS的display属性，只要设置为node即可隐藏元素。本文将通过对当前所有可用的隐藏元素的方法做了一个总结，大概有10种方法可以使用。
【前端面试3+1】15 CSS如隐藏元素、css块级元素和行内元素有哪些？两者有什么区别？、JavaScript中“==”与“===”的区别、【丢失的数字】
最新发布
qq_61798306的博客
04-13 560
【前端面试3+1】14 CSS如隐藏元素、css块级元素和行内元素有哪些？两者有什么区别？、JavaScript中“==”与“===”的区别、【丢失的数字】
CSS元素显示模式的存在(块级元素，行内元素，行内块元素
weixin_58163367的博客
03-16 610
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】源码讲义、实战项目、讲解视频**如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）[外链图片转存中…(img-bY6Vrvb3-1710590655532)]技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
【CSS】标签显示模式 ① ( 标签显示模式 | 块级元素 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-06 1287
一、标签显示模式 ( 块级元素 | 行内元素 ) 二、块级元素 1、块级元素简介 2、块级元素特点 3、文字块级元素 4、代码示例
css弹出层代码分享
09-25
`<span>`通常用于内联元素，而`<div>`则是一个块级元素，它们可以被CSS样式化以实现弹出层效果。 接着是CSS部分，主要定义了`.nav`和`.nav div`两个选择器： 1. `.nav`：设置了字体大小为1.0em，相对定位（`...
8.22前端实习生岗位面试题分享（带答案）通俗易懂 1 积分
08-24
3. **行内元素与块级元素的区别**： - 行内元素在同一行内排列，块级元素则独占一行。 - 块级元素可以包含行内元素和块级元素，行内元素通常不能包含块级元素。 - 盒模型属性上，行内元素的`width`和`height`设置...
CSS+JavaScript面试题.docx
08-30
2. `DIV` 元素通常用于组织页面结构，常作为块级元素，会独占一行；`SPAN` 元素则为内联元素，可以在同一行内与其他内联元素并排显示。 3. `position` 属性在HTML布局中有五种值：`static`（默认值）、`relative`、...
29款纯DIV+CSS网站导航菜单源码分享
03-14
6. **汉堡菜单**：对于移动设备，由于屏幕空间有限，使用汉堡图标（三横线）来隐藏和显示菜单是常见的做法。 7. **导航布局**：导航菜单可以是水平的、垂直的，甚至可以是网格或圆形布局，这些源码提供了多种可能的...
CTRL-fit-Website:该项目专注于“健身与健康”，可帮助用户开始减肥，增肌，增肌，在家健身，瑜伽和冥想方面的旅程
04-06
4. **内联元素与块级元素**：内联元素（如`<span>`、`<a>`）在同一行内显示，而块级元素（如`<div>`、`<p>`）则占据整行。 5. **语义化HTML**：为了提高可访问性和搜索引擎优化，项目可能使用语义化的HTML标签，如`...
display显示与隐藏元素
热门推荐
rmxob的博客
09-25 1万+
显示与隐藏元素本质displayvisibilityoverflow 本质 让一个元素在页面隐藏或者显示出来 display display用来设置一个元素如何进行显示 display:none ;隐藏元素 display:block;除了转换块元素之外，也用来显示元素 display隐藏元素后，不在占有原来的位置。 visibility visibility:visiable;元素可视； visibility:hidden;元素隐藏； visibility隐藏元素后，继续占有原来的位置。 如果
css中display设置显示隐藏、定位功能
yoghurt&girl的博客
06-07 1万+
前言一、displayopacity效果图：二、定位1.为什么要定位2.定位模式静态定位相对定位绝对定位知识点的延伸显示隐藏，display在我们之前学习的知识点里面我们的display属性是给我们来设置元素转换模式的。但是除了元素转换之外，display还可以显示隐藏元素。取值范围0-1,【0完全消失，1完全显示】这个属性和display：none隐藏元素有一个很相似的地方都是能够让元素隐藏的，但是display能够让元素的位置在页面中消失，但是opacity这个属性只是让元素看不见，但实际上位置还在原来
高级技巧 元素的显示与隐藏
lizixuan2001的博客
11-21 295
元素的显示与隐藏
元素的显示与隐藏
里昂的博客
10-25 250
1. 使用display显示 display:none 隐藏对象. display:block 除了转换层块级元素,同时还有显示元素的意思. 特点: 隐藏后不再保留位置,多用于下拉菜单. 2. visibility可见性 visibility:visible 对象可视 visibility:hidden 对象隐藏 特点:隐藏后保留位置(停薪留职), 3. overflow 溢出 ...
display属性及用法
m0_62065520的博客
02-06 590
display是 CSS 中用于指定元素如何在页面中呈现的属性。常用取值有： block：元素将被显示为块级元素，会独占一行。并且会在前后都有换行符，使得元素之间垂直排列。 inline：元素将被显示为内联元素，不会独占一行，可以与其他内联元素并排。宽度由内容决定，不会强制换行。 inline-block：元素将被显示为内联块级元素，可以设置宽高等属性。 flex：元素将被显示为弹性盒子，可以使用弹性盒子布局。 grid：元素将被显示为网格容器，可以使用网格布局。 none：元素将不会被显示。
[知识点滴]HTML页面元素显示&隐藏方式及区别
图解AI
09-30 6771
作为前端大家都知道在网页中控制元素的显示与隐藏的方式有很多，不过大家更喜欢的是使用 display: none; 以及 display: block; 的方式来操作。理论上来说，这个方式是最简单有效的，不过在这里我想说几个小志个人对显示隐藏页面元素的几种方式看法： display 属性的方式； visibility 属性的方式； opacity 属性的方式； width & height 属性的改变
元素的显示与隐藏——display、visibility、overflow
Dreamer
11-05 454
元素的显示与隐藏 让一个元素在页面中隐藏或者显示出来 display显示隐藏 display属性用于设置一个元素如何显示 display: nonoe;隐藏对象 display: block;除了有将元素转化为块级元素之外，还有显示元素的意思。 display属性隐藏元素后，元素不再占有原来的位置。搭配JS可以做很多网页特效。 visibility显示隐藏 visibility属性用于设置一个元素可见还是隐藏。 visibility: visible;元素可视 visibility: hidden;元
请写出至少五个块级元素_html5与css3阶段复习题
weixin_31064267的博客
12-29 457
1.请列出核心选择器、层次选择器有哪些 (5)核心选择器：id选择器、class选择器、标签选择器、逗号选择器、普遍选择器层次选择器：子代选择器、后代选择器、下一个兄弟选择器、之后所有兄弟选择器2.块级元素的显示与隐藏，写出两种方法，并说明区别 (5)display:none/block 元素隐藏之后，不占用原来的位置visibility:hidden/visible 元素隐藏之后，占用原来的位置...
如何使块级元素显示伪类联元素？display：
03-26
2. 将伪类联元素设置为块级元素，与目标元素处于同一行，也可使用浮动或绝对定位等方法处理布局。 例如，将块级元素div的第一个字母设为红色： ```html div:first-letter { color: red; display: inline-block...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值