css如何控制元素的显示与隐藏

css如何控制元素的显示与隐藏

属性介绍:

(推荐教程:css视频教程)

1. display属性

display属性用于设置一个元素应如何显示。

立即学习“前端免费学习笔记(深入)”;

display: none; 隐藏对象display: block; 除了转换为块级元素之外,同时还有显示元素的意思

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

2. visibility可见性

visibility属性用于指定一个元素应可见还是隐藏。

visibility: visible; 元素可见visibility: hidden; 元素隐藏

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

如果隐藏元素想要原来的位置,就用visibility: hidden

如果隐藏元素不想要原来的位置,就用display: none

3. overflow溢出

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度和宽度)时,会发生什么。

b01960d5851b5f3a39999336dc87a80.png

一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局。但是如果有定位的盒子,请慎用overflow: hidden,因为它会隐藏多余的部分。

4. 溢出的文字省略号显示

4.1 单行文本溢出显示省略号

单行文本溢出显示省略号必须满足三个条件:

先强制一行内显示文本

white-space: nowrap;/*默认值normal,自动换行*/

超出的部分隐藏

overflow: hidden;

文字用省略号替代超出的部分

text-overflow: ellipsis;

4.2 多行文本溢出显示省略号

多行文本溢出显示省略号,有较大兼容性问题,适合于webkit浏览器或移动端,移动端大部分是webkit内核。

overflow: hidden;text-overflow: ellipsis;/*弹性伸缩盒子模型显示*/display: -webkit-box;/*限制在一个块元素显示的文本的行数*/-webkit-line-clamp: 2;/*设置或检索伸缩盒子对象的子元素的排列方式*/-webkit-box-orient: vertical;

相关推荐:CSS教程

以上就是css如何控制元素的显示与隐藏的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1615792.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 05:06:15
下一篇 2025年12月24日 05:06:24

相关推荐

  • 了解一些 提高前端开发效率的 CSS 属性选择器

    (推荐教程:CSS教程) 属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法。 通常将 HTML 属性放在方括号中,称为属性…

    2025年12月24日
    000
  • 详细介绍CSS计数器

    css计数器效果是指使用CSS代码实现随元素的数目增多, 数值也跟着变大的效果, 有点类似于 , 但是比ol更灵活。 (推荐教程:css视频教程) CSS计数器有两个属性 (counter-reset 和 counter-increment) 和一个方法 (counter() / counters(…

    2025年12月24日 好文分享
    000
  • 如何利用css改变input光标颜色

    具体方法如下: (推荐教程:css视频教程) 1、使用color来实现 光标的颜色是继承自当前输入框字体的颜色,所以用color属性即可改变: 立即学习“前端免费学习笔记(深入)”; input{ color:red;} 2、使用caret-color来实现 上一种方式已经修改了光标的颜色但是字体的…

    好文分享 2025年12月24日
    000
  • css样式重置

    对CSS重置的个人理解: (推荐教程:css视频教程) 首先,我觉得像我一样对于理解概念无感,容易混淆的前端小白要清楚什么是css重置样式,就要弄清楚两个概念:CSS Reset以及css重置(其实概念很相近,但是还是有所区别的),不然傻傻只知道css样式要重置,知其然不知其所以然,这对于我这种对概…

    2025年12月24日
    000
  • css给图片添加水印

    目的: 给一些图片加上水印。 (学习视频推荐:css视频教程) 图片和水印展示区域 立即学习“前端免费学习笔记(深入)”; 样式 .watermark-image { position: relative; width: 300px; height: 300px; background: url(‘…

    2025年12月24日
    000
  • css实现div背景色闪烁效果

    我们先来看下效果图: (视频教程推荐:css视频教程) 代码实现: 立即学习“前端免费学习笔记(深入)”; @keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.0; } to { opacity: 1.0; }}.headerBox {…

    2025年12月24日
    000
  • css如何实现Tab切换

    方法一、利用a标签的锚点实现tab切换 (推荐教程:CSS教程) 代码如下: cssTab切换2 *{ margin: 0; padding: 0; text-decoration: none; } .tab{ width: 300px; height: 300px; margin: 30px au…

    2025年12月24日
    000
  • 如何利用css画出一个三角形

    首先我们来看一下效果图: (视频教程推荐:css视频教程) 实现代码: /* css3绘制三角形 */ .triangle{ width: 0px; /*设置宽高为0,所以div的内容为空,从才能形成三角形尖角*/ height: 0px; border-bottom: 200px solid #0…

    2025年12月24日 好文分享
    000
  • css中”:“和”::“有什么区别么

    区别:一个冒号是伪类,两个冒号是伪元素。 (推荐教程:CSS教程) 伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。 伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素…

    2025年12月24日
    000
  • css中@有哪些用法

    CSS代码中经常会有@命令的应用,且功能多样。语法结构基本是一致的,@后面紧跟一个关键字,用于规定各自的功能。 at-rule是一个声明,为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么。这是一个通用的语法,尽管每个at-r…

    2025年12月24日
    000
  • css设置背景透明度有什么方式

    实现背景透明有多种方式,本文为大家介绍以下两种方式: (相关教程推荐:CSS教程) css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,2…

    2025年12月24日
    000
  • css如何设置相邻单元格边框之间的距离

    我们先来看下实现效果: (推荐教程:CSS教程) 可以利用 border-spacing 属性来设置相邻单元格的边框间的距离(仅用于“边框分离”模式)。 立即学习“前端免费学习笔记(深入)”; 具体代码: border-collapse: separate;border-spacing: 0px 1…

    2025年12月24日
    000
  • css实现卡片式图片效果

    首先我们来看一下效果图: (推荐教程:CSS教程) html代码: 立即学习“前端免费学习笔记(深入)”; @@##@@ 打破企业间壁垒,提供便捷的接入方式,实现不企业,不同品牌、不同类型间的家电的数据互联互通和数据协同 css代码: .card img { width: 100%;}.card{ …

    2025年12月24日
    000
  • css如何为div添加阴影效果

    本文为大家分享了css为div添加阴影的方法,希望可以帮助到大家。 (相关推荐:CSS教程) 代码实现: .mydiv{ width:250px; height:auto; border:#909090 1px solid; background:#fff; color:#333; filter:p…

    2025年12月24日
    000
  • 纯css代码实现简单下拉菜单效果

    实现方法: (推荐教程:CSS教程) 1、用ul 和 li标签写一个关联结构(ul 和 li的父子关系浑然天成,一般的关联结构都用它们) 服装 衬衫 棉袄 裤衩 2、对界面进行初始化(万金油式开头) 立即学习“前端免费学习笔记(深入)”; *{ padding: 0; margin: 0; } 3、…

    2025年12月24日
    000
  • css实现点击切换图片效果

    我们先来看下效果图: (相关教程:CSS教程) 切换前: 立即学习“前端免费学习笔记(深入)”; 切换中: 切换成功: HTML代码: 来自Limou的尝试解读来自Limou的尝试解读12341234Images1Images2Images3Images4Images1Images2Images3I…

    2025年12月24日 好文分享
    000
  • css中的“计算属性”是什么

    首先本文要讲的计算属性和vue的计算属性没有一点关系。 (推荐教程:CSS教程) 相信大家开发中遇到过这样的问题: 我设计样式,多用百分比布局,这样在不同分辨率就不会出现特别大的偏差,但是也不能避免不适用px等固定单位,所以当我们父元素分为2部分,头部使用了像素px,但是底部需要剩下所有的大小怎么办…

    2025年12月24日
    000
  • 你会使用css锚点么

    CSS锚点使用有两种方法,我建议使用下面这种: (推荐教程:CSS教程) 到达第一个锚点 到达第二个锚点 我是第一个锚点 我是第一个锚点 这样当我们点击A链接时, 对应的DOM节点就会滚动到窗口顶部。 但有时我们的需求并不是让它滚动到窗口顶部。 可能要他距离顶部有一定的距离。这时候可以由以下方法解决…

    2025年12月24日
    000
  • css实现可收缩的上下左右布局

    首先我们来看一下实现效果: (推荐教程:CSS教程) 代码实现: 立即学习“前端免费学习笔记(深入)”; 布局 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .left { width: 220px; h…

    2025年12月24日
    000
  • css实现一个简单的扁平化按钮

    我们先来看下按钮样式: (推荐教程:CSS教程) 具体代码: 立即学习“前端免费学习笔记(深入)”; 打印//js写法$(“#btn”).css({“font-family”: “‘微软雅黑’,’Helvetica Neue’,Helvetica,Arial,sans-serif”,”font-si…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信