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

最新推荐文章于 2022-06-07 16:16:54 发布
最新推荐文章于 2022-06-07 16:16:54 发布
阅读量556 收藏
点赞数
分类专栏： 前端学习 文章标签： 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43339892/article/details/122257133
版权
本文详细探讨了前端开发中控制元素显示和隐藏的三个关键CSS属性：display、visibility和overflow。display属性隐藏元素后，元素不占据空间；visibility属性下，元素虽不可见但保留其位置；而overflow属性在处理定位盒子时需谨慎使用。
摘要由CSDN通过智能技术生成

显示隐藏元素的使用

1、display 属性

display隐藏元素后，不再占有原来的位置

            /* 元素隐藏 */
            display: none;
            /* 元素出现 */
            display: block;
2、visibility 属性

visibility隐藏元素后，继续占有原来的位置

            /* 元素隐藏 */
            visibility: hidden;
            /* 元素可视 */
            visibility
最低0.47元/天 解锁文章
西樱studio
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（重点）定位：相对定位、绝对定位、固定定位等，显示隐藏的3种方式：display:none；visibility:visible； overflow:visible；
weixin_52583990的博客
07-27 228
以上就是今天要讲的内容，本文仅仅简单介绍了定位和显示隐藏的使用
显示隐藏-overflow（HTML、CSS）
...
08-14 215
显示隐藏-overflow（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>显示隐藏-overflow</title> <style&
display与overflow 同时使用失效
haruhyuhae的博客
08-20 454
display与overflow 同时使用失效 在写导航滚动的时候，display浮动与overflow的scroll同时设置，但是overflow却无效了 解决方案： 给子元素设置一个 flex-shirk:0 就可以了
前端学习 -- Css -- display和Visibility
A08110123的博客
04-26 125
display 将一个内联元素变成块元素，通过display样式可以修改元素的类型。可选值：1 inline：可以将一个元素作为内联元素显示。2 block: 可以将一个元素设置块元素显示。3 inline-block：将一个元素转换为行内块元素。- 可以使一个元素既有行内元素的特点又有块元素的特点,既可以设置宽高，又不会独占一行。4 none: 不显示元素，并且元素不...
CSS 隐藏（display、visibility、overflow 三种隐藏的区别）
Ares5k
04-08 759
display、visibility、overflow 三种隐藏的区别
前端提高篇(九十八)：jQuery动画：显示与隐藏动画
安之ccy的博客
04-03 585
1. hide() / show() hide()：隐藏 show()：显示 原本的图案： .box { width: 100px; height: 100px; background-color: pink; color: #fff; line-height: 100px; text-align: center; } <button>btn</button> <div class="box">box</div&gt
一位大学生的前端学习笔记
最新发布
01-22
- 遇到浮动元素导致的父元素高度塌陷，可以通过在父元素上设置`clearfix`类或者使用`overflow: hidden;`来解决边距塌陷问题。 这些笔记覆盖了前端开发中的基础概念，对于初学者来说是非常宝贵的学习资源。理解并...
前端学习笔记：浮动知识点
weixin_43339892的博客
08-30 250
浮动概念：可以让多个块级元素一行内排列 一、浮动特性 浮动元素会脱离标准流 浮动的元素会一行内显示并且元素顶部对齐 浮动的元素会具有行内块元素的特性 浮动的盒子不再保留原先的位置 二、使用浮动布局注意事项 浮动和标准流的父盒子搭配 先用标准的父元素排列上下位置，之后内部元素采用浮动排列左右位置 一个元素浮动了，理论上其余的兄弟元素也要浮动 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流 三、清除浮动方法 额外标签法也称为隔墙法，是W3C推荐的做法，额外标签法会在浮动元素末尾添加一个
【CSS基础学习笔记】定位、元素的显示与隐藏
aaatool的博客
06-07 315
浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。（例如“回到顶部”按钮）定位 = 定位模式 + 边偏移定位模式决定了元素的定位方式，通过position属性设置，分为4个。static（静态定位）默认定位，即无定位，按照标准流特性摆放。relative（相对定位）元素是相对于原来的位置移动的。原来在标准流的位置也继续占有，后面的盒子仍然以标准流的方式对待它。 absolute（绝对定位）
2021/3/17--前端第9天--display、visibility
A444477的博客
03-17 240
2021/3/17–前端学习第9天笔记 隐藏元素： display:none 设置显示方式 消失、不占位 visibility:hidden 设置可见度：消失占位 opacity:0 设置透明度 display:none和visibility:hidden(visible)两者的区别： 隐藏后一个占位一个不占位。 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则
block，inline和inline-block概念和区别
lihei12345的专栏
07-13 1402
[转]  总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（
web前端学习（二十二）——CSS3元素的显示（display）、可见性（visibility）与溢出（overflow）属性的相关设置
热门推荐
★★光亭★★
02-02 1万+
web前端学习（二十二）——CSS3元素的显示（display）、可见性（visibility）与溢出（overflow）属性的相关设置
CSS - 元素的显示与隐藏
weixin_42235173的博客
06-07 285
元素的显示与隐藏 让一个元素在页面中消失，但是不在文档源码中删除 属性 值 特点 display none 隐藏之后，不再保留位置 visibility hidden 隐藏之后，继续保留原有位置 overflow hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉 ...
关于元素的显示与隐藏
weixin_45976564的博客
09-17 1256
元素的显示与隐藏 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现 本质：让一个元素在页面中隐藏或者显示出来 一.display属性（显示隐藏元素，但是不保留位置） display：none ；隐藏对象 display：block；除了转换为块级元素之外，同时还有显示元素的意思 display隐藏元素后，不再占有原来的位置。 后面应用及其广泛，搭配js可以做很多的网页特效 二.visibility可见性（显示隐藏元素，但是保留原来位置） visibility：vis
前端基础：CSS元素的显示与隐藏
weixin_49555741的博客
03-23 2281
1. 元素的显示与隐藏 类似网站广告，当我们点击关闭就不见，但是我们重新刷新页面，就会重新出现 本质：让一个元素在页面中隐藏或者显示出来 1.1display 显示隐藏 display属性用于设置一个元素如何显示 display：none；隐藏对象 display：block；除了转换块级元素外，同时还显示元素 1.2 visibility 显示隐藏 1.3 overflow 溢出显示隐藏 ...
字体图标的网站和使用
weixin_45441561的博客
11-11 279
字体图标的网站和使用 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。。 这就是字体图标（iconfont...
css overflow属性，display和visibility的区别
清风了了的博客
05-23 9092
overflow规定当内容溢出元素框时发生的事情。overflow：visible 默认值，内容不会被修剪，会呈现在元素框之外。overflow：hidden 内容会被修剪，并且其余内容是不可见的。overflow：scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。overflow：auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。overflow：inheri...
overflow：hidden与display：none的区别
weixin_45904557的博客
03-16 2126
1、Display:none 隐藏 但是在原来的标准流不占位置，使用此属性之后元素不存在了，元素占据的位置也不存在。 2、Overflow:hidden 对行内元素无效，必须是块级元素，并且设置宽度高度。 Overflow:hidden,隐藏之后元素依然占据着位置。视觉上消失了，可以理解为透明度为0的效果，在文档流中占位， display:none和visible:hidden 相同点： 都能把网页上某个元素隐藏起来。 二、diaplay：none与visibility：hidd
CSS隐藏元素：display、visibility与opacity对比解析
"这篇文章主要介绍了前端开发中隐藏元素的三种方式：display、visibility和opacity，并对比了它们之间的区别。" 在前端开发中，隐藏元素是一个常见的需求，通常用于实现交互效果或者某些特定的布局。文章重点讲解了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值