html+css中的四种隐藏方式

这次给大家带来html+css中的四种隐藏方式,html+css中隐藏方式的注意事项有哪些,下面就是实战案例,一起来看一下。

1.opacity:0只是把元素隐藏起来了 ,但是还是占有布局,所以还是对布局有影响

snda:opacity:0只是把元素隐藏起来了 ,但是还是占有布局,所以还是对布局有影响

ppskdkad

.p1{opacity: 0;width:200px;height:200px;border:1px solid red;}

2.visibility:hidden还是只是把元素隐藏了,但是还是占有布局

这是第二个p visibility:hidden还是只是把元素隐藏了,但是还是占有布局

看看效果

.p2{visibility: hidden;width:200px;height:200px;border:1px solid red;}

3.display:none不会影响到布局

这是第三个p display:none不会影响到布局

不信你看

.p3{display: none;width:200px;height:200px;border:1px solid red;}

4.position:absolute不会影响到布局


这个是第四个p 我觉得也不会影响到布局 但是到底会不会 一起来看看吧 果然这个也不会影响到布局


看看

v
.p4{position: absolute;top:-9999px;left:-9999px;width:200px;height:200px;border:1px solid red;}

相信看了本文案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章!

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

推荐阅读:

清除浮动的几种方法

怎样隐藏文本的超出部分

以上就是html+css中的四种隐藏方式的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 00:52:04
下一篇 2025年12月24日 00:52:25

相关推荐

  • CSS实现一级导航栏

    这次给大家带来CSS实现一级导航栏,CSS实现一级导航栏的注意事项有哪些,下面就是实战案例,一起来看一下。 第一步:引入css样式表,新建一个id为nav的层,使用、、标签来制作完成效果。 首页 首页 首页 首页 首页 第二步设置CSS样式: 1.设置nav的属性 #nav{ width: 500p…

    2025年12月24日
    000
  • CSS有几种实现三栏布局的方法

    这次给大家带来CSS有几种实现三栏布局的方法,CSS实现三栏布局的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那…

    好文分享 2025年12月24日
    000
  • 用css实现浮雕效果

    这次给大家带来用css实现浮雕效果,用css实现浮雕效果的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 最近在看百度地图看到了一个效果,感觉这个效果用在网页上应该蛮赞的,于是就学习了一下。 效果图如下: 浮雕效果需要用到伸缩盒的知识(flex) flex在chrome是完全支持的,要加-w…

    2025年12月24日
    000
  • CSS怎么处理浏览器的默认样式

    这次给大家带来CSS怎么处理浏览器的默认样式,CSS处理浏览器的默认样式注意事项有哪些,下面就是实战案例,一起来看一下。 发现 最近在调整网页的格式发现网页底部总是有一个10像素左右的空格。 通过用Chrome流浪器的审查元素发现有一个叫user agent stylesheet设置整个form的m…

    2025年12月24日
    000
  • css中px、em和rem使用详解

    相信每位前端工程师们都有这么一个体会,国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别,需要的朋友可以参考借鉴,下面来一起看看吧。 前言 em 和 rem 都是灵活可扩展的单…

    好文分享 2025年12月24日
    000
  • CSS3实现点击放大的动画实例

    这次给大家带来CSS3实现点击放大的动画实例,CSS3实现点击放大动画实例的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 最近在工作中遇到一个需求,实现的效果是当点击商品图片右上的收藏按钮触发放大动画,后来通过查找相关的资料,发现利用css3:@keyframes animation即可实…

    2025年12月24日
    000
  • css做出波纹动画

    这次给大家带来css做出波纹动画,css做出波纹动画的注意事项有哪些,下面就是实战案例,一起来看一下。 效果图如下 实例代码如下 body{ background: #000; } .box{ width: 100%; height: 600px; background: #000; } .vr {…

    2025年12月24日
    000
  • CSS的background-attachment使用详解

    这次给大家带来,的注意事项有哪些,下面就是实战案例,一起来看一下。 一、background-attachment属性 在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。 语法: background-attachment:scroll/…

    2025年12月24日
    000
  • css3多类选择器使用详解

    这次给大家带来css3多类选择器使用详解,使用css3多类选择器的注意事项有哪些,下面就是实战案例,一起来看一下。 下面一段代码给大家介绍css3类选择器之结合元素选择器和多类选择器用法,具体代码如下所示: Title .p2{font-size:30px;} /*结合元素选择器*/ p.p1{co…

    好文分享 2025年12月24日
    000
  • React与CSS3实现微信拆红包动画

    这次给大家带来React与CSS3实现微信拆红包动画,React与CSS3实现微信拆红包动画的注意事项有哪些,下面就是实战案例,一起来看一下。 微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,供大家一起交流学习 用…

    2025年12月24日
    000
  • 用CSS3实现头像旋转效动画

    这次给大家带来用CSS3实现头像旋转效动画,用CSS3实现头像旋转效动画的注意事项有哪些,下面就是实战案例,一起来看一下。 鼠标未放上效果: 鼠标放上之后旋转效果: transition: all 2.0s;表示所有的属性变换在2秒内完成; transform: rotate(360deg);表示图…

    2025年12月24日
    000
  • 在CSS实现Footer置底的几种方式

    这次给大家带来在CSS实现Footer置底的几种方式,在CSS实现Footer置底的注意事项有哪些,下面就是实战案例,一起来看一下。 页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但…

    2025年12月24日
    000
  • CSS3实现进度条的俩种方法

    这次给大家带来CSS3实现进度条的俩种方法,CSS3实现进度条的注意事项有哪些,下面就是实战案例,一起来看一下。 效果图如下:     第一种姿势如下  先上代码 /*对应CSS*/ #progress{ width: 300px; height: 30px; border:1px solid #c…

    2025年12月24日 好文分享
    000
  • CSS有多少清除浮动的方式

    这次给大家带来CSS有多少清除浮动的方式,清除浮动的注意事项有哪些,下面就是实战案例,一起来看一下。 1、设置父元素高度 如果一个元素要浮动,那么它的祖先元素一定要有高度.高度的盒子,才能关住浮动 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素.所以就是清除浮动带来的影响了. 弊…

    2025年12月24日
    000
  • CSS的Selector使用详解

    这次给大家带来CSS的Selector使用详解,使用CSS的Selector注意事项有哪些,下面就是实战案例,一起来看一下。 CSS1 中定义的选择器 类型选择器 用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下: body { /*对 body 元素定义样式*/}body,…

    2025年12月24日
    000
  • CSS的checkbox效果使用详解

    这次给大家带来CSS的checkbox效果使用详解,使用CSS的checkbox注意事项有哪些,下面就是实战案例,一起来看一下。 实现思路 纯css实现的主要手段是利用label标签的模拟功能。label的for属性可以关联一个具体的input元素,即使这个input本身不可被用户可见,有个与它对应…

    好文分享 2025年12月24日
    000
  • 用css3画个同心圆

    这次给大家带来用css3画个同心圆,用css3画个同心圆的注意事项有哪些,下面就是实战案例,一起来看一下。 基本思路 首先你得画三个圆吧,那三个圆怎么重叠到一块呢?这个就得靠-margin来控制了。 css #t1 { float:left; width:150px; height:150px; b…

    2025年12月24日
    000
  • css3取消上下边的列表间隔线

    这次给大家带来css3取消上下边的列表间隔线,css3取消上下边的列表间隔线的注意事项有哪些,下面就是实战案例,一起来看一下。 效果图:   方法一:通用兄弟选择器( ~ ) Document ul {margin: 0; padding: 0;} li { list-style: none; he…

    2025年12月24日
    000
  • 用CSS将网站变黑白

    这次给大家带来用CSS将网站变黑白,用CSS将网站变黑白的注意事项有哪些,下面就是实战案例,一起来看一下。 方法如下: 这段CSS代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装。 html{filter: grayscale(100%);-webkit-filter: grayscale…

    好文分享 2025年12月24日
    000
  • 用CSS将网页变黑白

    这次给大家带来用CSS将网页变黑白,用CSS将网页变黑白的注意事项有哪些,下面就是实战案例,一起来看一下。 方法如下: 这段CSS代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装。 html{filter: grayscale(100%);-webkit-filter: grayscale…

    好文分享 2025年12月24日
    000

发表回复

登录后才能评论
关注微信