css隐藏元素的几种方式及区别

最新推荐文章于 2024-08-14 12:22:11 发布
最新推荐文章于 2024-08-14 12:22:11 发布
阅读量86 收藏
点赞数
分类专栏： css 文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33485463/article/details/128890815
版权
文章探讨了CSS中不同隐藏方式如display:none、visibility:hidden和opacity:0对元素空间占用、浏览器重排重绘以及能否触发点击事件的影响。display:none不占据空间且无点击响应，visibility:hidden仍占空间但不可见，opacity:0则在视觉上透明但保留空间并能响应点击。设置盒模型属性为0可能影响布局，但不影响点击事件。
摘要由CSDN通过智能技术生成
显示隐藏方式是否占据空间是否导致浏览器重排重绘能否触发点击事件
display : none    NoYesNo
visibility : hiddenYesNoNo
opacity : 0 YesNoYes
设置height，width等盒模型属性为0 NoMaybeNo

今天也在写bug
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS隐藏元素的几种方式
梅花寺
05-25 733
CSS隐藏元素的几种方式 前言 开始之前，先来了解一下回流和重绘的概念。(经小伙伴评论提醒，后来加的内容) 回流：当我们修改元素的几何位置属性，如宽度、高度时，浏览器会重新布局，这个过程就叫回流 重绘：当我们修改元素的绘制属性，如背景色、颜色等，浏览器不会重新布局，但是需要重新进入绘制阶段，这个过程就是重绘。 可以通过css triggers网站查询元素是否会导致回流、重绘。 回流一定会触发重绘，重绘不一定会触发回流 display: none 最常见的隐藏元素的方法，不会渲染该元素，所以该元素不会占位置，
css隐藏元素的几种方法
webchang的博客
03-02 447
css隐藏元素的8种方法，代码演示和分析
CSS中隐藏页面元素的几种方式和区别
主要分享测试的学习资源，帮助快速了解测试行业，帮助想转行、进阶、小白成长为高级测试工程师。
05-31 4819
前言、 在平常的样式排版中，我们经常遇到将某个模块隐藏的场景，通过css隐藏的元素方法有很多种，它们看起来实现的效果是一致的，但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法。 实现方法综合、 通过css实现隐藏元素方法有如下： display：none visibility：hidden opacity：0 设置height、width模型属性为0 position：absolute clip-path 方法一：display：none display：none是通常
CSS隐藏页面元素的5种方法
09-24
本文将详细介绍CSS隐藏元素的五种方法：opacity、visibility、display、position以及clip-path。 首先，`opacity`属性用于设置元素的透明度。将`opacity`设置为0可以让元素变得完全透明，从而视觉上隐藏它。然而，...
Html 元素隐藏的几种方式
09-28
在文档中提及的几种隐藏元素的方法中，主要涉及了CSS中的display属性以及JavaScript的DOM操作，下面将详细介绍这些方法。 首先，CSS中的display属性是控制元素可见性的常用工具，它能够控制元素是否显示以及其布局...
CSS隐藏页面文字的几种方式总结
12-13
方式一：text-indent:-9999px不多说，ext-indent负值为最常用方法，然问题有三：1.较大的负值有性能问题，例如新浪/腾讯微博提交按钮的-9999em，大概12~16万像素的宽度，相对于100个显示器宽度，在低配Android pad上...
CSS中几种常见的注释
10-30
今天，我们将介绍几种常见的 CSS 注释方式，它们可以帮助你在不同浏览器中隐藏或显示代码。 选择器（Child Selector） 在 CSS 中，选择器是一种常见的注释方式，它可以帮助你在 IE 浏览器中隐藏一个 CSS 定义。这种...
大转盘抽奖的网页版和小程序版
热门推荐
菜鸟丹丹的博客
09-02 1万+
今天整理了下以前写的小demo，把大转盘抽奖的代码，整合下，列了网页版和小程序两个版本,这个转盘抽奖的核心是H5的canvas和Css3的translate属性，非常简单，写了网页版和小程序版供大家参考，主要核心代码就是利用canvas画图，完整代码见https://github.com/Elve520/lottery，下载可用 希望给大家带来帮助 //转盘内部绘制 lottery.prot...
行内元素和块级元素
菜鸟丹丹的博客
02-03 585
行内元素和块级元素的具体区别
css中的Sticky footer 布局
菜鸟丹丹的博客
10-23 301
什么叫Sticky footer 布局呢？ 我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是Sticky footer布局。 一般网上会推荐几种方法，但经过亲身实践，我发现还是负margin布局方式比较实用，兼容性最好 ...
关于css布局（水平垂直居中）
菜鸟丹丹的博客
03-09 179
在工作过程中一直碰到关于css布局的问题，其实除了margin:0 auto之外，还有一些很灵活的方法水平居中1）使用inline-block+text-align，先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。对子框设置display:inline-block，对父框设置text-align:center。<div class="parent"> ...
position-元素定位
菜鸟丹丹的博客
02-05 107
position元素定位 css
css实现水滴效果图
yinge0508的博客
08-12 1109
【代码】css实现水滴效果图。
CSS 基础
jht_520的博客
08-10 324
比如，增加内边距可以使元素内部的内容与边框之间有更多的空间，而调整外边距可以控制元素与周围元素的距离。通过使用媒体查询，我们可以针对不同的屏幕宽度设置不同的 CSS 规则。例如，在小屏幕设备上，可以隐藏一些不必要的元素，或者改变导航栏的样式，以提供更好的用户体验。它可以决定网页中文字的字体、大小、颜色，还能设置元素的背景颜色、边框样式等。比如，通过 CSS 我们可以将网页的标题设置为醒目的大字号、独特的字体和鲜艳的颜色，使其更加吸引用户的注意力。CSS，即层叠样式表，是网页设计中不可或缺的一部分。
CSS（层叠样式表）
Chujun123528的博客
08-09 1228
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
【playwright篇】CSS 选择器 详细用法
最新发布
qadnkz的专栏
08-14 667
在 Playwright 中，CSS 选择器是非常重要的，因为它们用于定位页面上的元素。CSS 选择器允许您通过 HTML 元素的属性、类名、ID 等来定位元素。以下是 CSS 选择器的一些基本用法和示例。
前端（HTML + CSS）小兔鲜儿项目（仿）
li3123537691的博客
08-09 661
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码。
css隐藏元素方法有？
05-25
常用的 CSS 隐藏元素方法有以下几种： 1. display:none：完全隐藏元素，元素不占据空间。 2. visibility:hidden：元素被隐藏，但仍占据空间。 3. opacity:0：将元素透明度设置为 0，元素不会被隐藏，但无法看到。 4. height:0;width:0：将元素高度和宽度设置为 0，元素仍占据空间。 5. position:absolute;left:-9999px：将元素移出屏幕，元素不占据空间。 6. clip:rect(0 0 0 0)：将元素裁剪为一个空白区域，元素不占据空间。 需要根据实际需求选择适合的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值