css元素隐藏（display:none和visibility:hidden）

时间：2022-09-06 10:32:09

在css中， display:none和visibility:hidden都能够使元素隐藏。但是两者所带来的效果完全不同。

css  display:none

当使用该样式的时候，HTML元素的宽高等各种属性都将失效，其所占据的空间消失，可将该元素视作完全不存在。

css  visibility:hidden

当使用该样式的时候，HTML元素的宽高等各种属性不会失效，其所占据的空间也会被完全保留下来，可将该元素视作完全透明。

*当然当某HTML元素具有样式display: none;visibility: visible;的时候元素不显示。

*当某HTML元素是绝对定位的时候，可以通过将其left属性值设置为负值。

css元素隐藏（display:none和visibility:hidden）的更多相关文章

  1. CSS属性中display="none“与visibility="hidden"的不同

    display="none",元素会从页面移除,不在页面占用位置,当某个元素设置为display="none"时,这个元素后面的元素会移动上来 visibili ...

  2. CSS元素隐藏的display和visibility

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间, ...

  3. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  4. CSS样式display&colon;none和visibility&colon;hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

  5. CSS魔法堂：display&colon;none与visibility&colon;hidden的恩怨情仇

    前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...

  6. CSS display&colon;none和visibility&colon;hidden区别

    你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...

  7. 个人收集（转载）CSS中 display&colon;none和visibility&colon;hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  8. display&colon;none&semi;与visibility&colon;hidden&semi;的区别

    visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...

  9. 您可能不知道的CSS元素隐藏&OpenCurlyDoubleQuote;失效”以其妙用

    您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...

随机推荐

  1. MySQL的分页优化

    今天下午,帮同事重写了一个MySQL SQL语句,该SQL语句涉及两张表,其中一张表是字典表(需返回一个字段),另一张表是业务表(本身就有150个字段,需全部返回),当然,字段的个数是否合理在这里不予 ...

  2. mysql 数据库常用命令总结

    (1)查看数据库可以支持的存储引擎  命令:show engines;  (2)查看表结构命令:desc table_name:(3)显示表的创建语句     show create table ta ...

  3. Masonry 固定宽度 等间距

    -(void)makeEqualDisViews:(NSArray *)views inView:(UIView *)containerView LRpadding:(CGFloat)LRpaddin ...

  4. &lbrack;Locked&rsqb; Longest Substring with At Most Two Distinct Characters

    Longest Substring with At Most Two Distinct Characters Given a string, find the length of the longes ...

  5. MySQL锁学习之UPDATE

    ##==============================================================================## 学MySQL也蛮长时间了,可一直停 ...

  6. CSS position 笔记&plus;实验

    目录: 1.static 2.relative 3.absolute 4.fixed 5.实验:static, relative, absolute中,父元素-子元素高度关系 6.z-index 7. ...

  7. VUE-008-通过路由 router&period;push 传递 query 参数（路由 path 识别，请求链接显示参数传递）

    在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...

  8. C&num;理解AutoResetEvent和ManualResetEvent

    当在C#使用多线程时就免不了使用AutoResetEvent和ManualResetEvent类,可以理解这两个类可以通过设置信号来让线程停下来或让线程重新启动,其实与操作系统里的信号量很相似(汗,考 ...

  9. &period;NetCore实现简单的分布式缓存

    分布式缓存能够处理大量的动态数据,因此比较适合应用在Web 2.0时代中的社交网站等需要由用户生成内容的场景.从本地缓存扩展到分布式缓存后,关注重点从CPU.内存.缓存之间的数据传输速度差异也扩展到了 ...

  10. 【PAT】B1075 链表元素分类（25 分）

    这道题算有点难,心目中理想的难度. 不能前怕狼后怕虎,一会担心超时,一会又担心内存过大,直接撸 将三部分分别保存到vector 有意思的在于输出 分别输出第一个的add和num 中间输出nextadd ...

相关文章