CSS显示与隐藏,overflow

最新推荐文章于 2022-12-06 16:14:50 发布
最新推荐文章于 2022-12-06 16:14:50 发布
阅读量445 收藏
点赞数
分类专栏： html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pruett/article/details/79379332
版权

1.display （主要）
1.1 display:none; 隐藏元素，但是元素还存在，只是不显示，占有的位置也没有了。
1.2 display: block； 转换为块元素，显示元素。
2.visibility
2.1visibility: hidden; 隐藏元素， 和1.1 最大的区别是 ，这个保留位置。
2.2 visibility: visible; 显示元素。

PS:可以用这个实现下拉菜单，实现鼠标经过或者点击等出现一个脱标的图片如二维码等
3overflow
属性：
3.1 visible 默认的，超出显示
3.2 auto 自动，超出就显示滚动条，不超出就不显示滚动条
3.3 scroll 一直显示滚动条
3.4 hidden 常用 ，不超出就正常显示，超出的部分就隐藏掉

Pruett
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于overflow：hidden溢出隐藏
weixin_45392189的博客
10-12 6142
一. overflow:hidden溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度，那么超出的部分将会被隐藏，不占据位置。 效果如下* 一般情况下，在页面中，一般溢出后会显示省略号，例如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。 效果如下* 二. overflow:hidden解决外边距塌陷 父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距...
css中text-overflow属性与文本截断详解
09-27
在CSS中，`text-overflow`属性是用来处理文本溢出情况的一个重要工具，尤其是当文本在有限的容器内无法完全显示时。这个属性通常与`overflow`和`white-space`属性一起使用，来实现文本的截断和省略。本文将深入探讨`...
overflow属性隐藏
m0_74899618的博客
12-06 193
overflow属性详解\n\n \n\n概述：溢出元素内容区的内容会如何处理\n\n \n\n## 取值\n\n \n\noverflow: visible;溢出显示，默认值\n\noverflow: hidden;溢出隐藏\n\noverflow: scroll;溢出显示滚动条，横向和纵向滚动条都显示\n\noverflow: auto;自动，内容溢出时，显示滚动条\n\n \n\n overflow-x 只包括水平方向。\n\n \n\n overflow-y 只包括垂直方向\n\n \n\n```h
overflow实现信息的显示和隐藏
成长全记录
05-13 849
我没想到,居然真的是这么做的.那天就是随便尝试了下,今天闲下来看了下淘宝网生成的页面代码,果然也是类似的作法.嘎嘎~ 利用overflow实现显示全部信息和隐藏部分信息． 不过偶写的很粗糙,还没利用overflowX,overflowY这两个样式． <ul id="cata_list" style="overflow:hidden;"> <% int len=listC...
CSS基础（二十二）--OverFlow隐藏
09-23 381
随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。 #------------------------------------------------我是可耻的分割线------------------------------------------- Overflow属性意思是超过我的范围隐藏，我们写一个div标签在里面设置高度和宽度，标签里面写一个img标签加载一个图...
【Web】CSS（No.28）元素的显示和隐藏（display、visibility、overflow）
Sherry带你学Web
06-12 360
元素的显示与隐藏 需要素材点击图片联系我或私信、评论 在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。 他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！ 显示（display） display 设置或检索对...
CSS属性text-overflow的使用问题
09-24
总结起来，`text-overflow`属性是CSS中处理文本溢出的一个强大工具，通常与`overflow`、`white-space`和`width`属性配合使用。它可以帮助我们在有限的空间内优雅地显示大量文本，既不破坏页面布局，又能提供足够的...
css overflow溢出隐藏(文字溢出时的自动隐藏处理)
12-13
版本：CSS2　兼容性：IE4+ NS6+　继承性：无语法：overflow : visible | auto | hidden | scroll 相关参数说明如下： visible:：不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window...
CSS省略号text-overflow超出溢出显示省略号
12-04
标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ellipsis;`来实现当文本内容超出指定容器的宽度时，用省略号表示被截断的文本。 `text-overflow`属性有以下几...
css使用overflow属性控制滚动条的样式
09-22
CSS中的`overflow`属性是用来控制元素内容在超出其指定宽度和高度时的显示方式。它提供了几个关键的值，使得开发者能够对滚动条的显示与否以及何时显示进行精确的控制。接下来，我们将深入探讨`overflow`属性的不同...
如何隐藏overflow滚动条
c_s_d_na的博客
03-26 5786
css overflow滚动条隐藏 1.使用css样式隐藏，比如vue项目可以直接写到app.vue中，整个全局就看不到滚动条了 scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ &::-webkit-scrollbar { // chrome safari display: none; }` 2.利用外部容器overflow：hidden，内部滚动容器设置padding撑开滚动条 .
隐藏overflow滚动条样式
cloud
02-23 334
隐藏overflow滚动条样式 css隐藏overflow： auto;带来的滚动条样式，并且保留滚动的功能。 内联代码片。 // css代码片段 .box{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-y: auto; /* overflow-y-纵向 / overflow-x-横向 */ } .box::-webkit-scrollbar{ display: none; } 隐藏overflow滚动条
css隐藏overflow滚动条的方法
wan_waning的博客
06-29 386
css隐藏overflow滚动条方法 在css中添加 ::-webkit-scrollbar{ display:none; }
元素的显示与隐藏.overflow~display~visibility
东北玛丽的CSDN
02-19 320
overflow 溢出 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容 visible : 　不剪切内容也不添加滚动条。 auto : 　 超出自动显示滚动条，不超出不显示滚动条 hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 　不管超出内容否，总是显示滚动条 .red{ width: 200px; ...
CSS使用overflow隐藏超出范围的内容(文本过长隐藏)
weixin_34315189的博客
08-05 154
<style type="text/css">.textOverFlow {width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #ddd;}</style><div class="textOverFlow">各类源码、CSS特效代码及常用软件...
css 为左侧添加一个竖线
Node.js安装报错 - npm -v 查看版本无效
10-10 1465
方法一: border-left <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
浮动的清除 （3 、清除浮动方法：隔墙法 4、清除浮动方法：overflow:hidden）
weixin_72303943的博客
07-06 583
浮动的清除 （3 、清除浮动方法：隔墙法 4、清除浮动方法：overflow:hidden）
css-overflow
火星男孩的分享空间
03-17 463
overflow :溢出 属性规定当内容溢出元素框时发生的事情。 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。 默认值：visible 可能的值 visible //默认值。内容不会被修剪，会呈现在元素框之外。 //内容太多会超出盒子 hidden //
css overflow隐藏
最新发布
03-09
CSS的overflow属性用于控制元素内容溢出时的处理方式。其中，overflow:hidden是一种常用的设置，它可以隐藏超出容器尺寸的内容。 当一个元素的内容超出了其指定的尺寸时，overflow:hidden会将超出部分进行隐藏，不...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值