精华内容
下载资源
问答
  • display:none

    万次阅读 多人点赞 2018-08-21 11:24:45
    1、display:none和visible:hidden都能把网页上某个元素隐藏起来。 2、但两者有区别: ●display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。 ●visible:...

    1、display:none和visible:hidden都能把网页上某个元素隐藏起来。

    2、但两者有区别:

    ●display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

    ●visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

    1、visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着。

    2、display: none----将元素的显示设为无,即在网页中不占任何的位置。

    3、例如有三个table,将中间的一个table hidden掉,你会发现在那个被hidden的table看不见了,但是,中间会留有很大的一空白,而这个空白就是这个table没有被隐藏时所占的位置。

    4、而none的作用更像是把元素从网页中“去除”(当然不是真的去除,只是效果是如此)

    5、例如有三个table,将中间的一个table none掉,你会发现在剩下的两个table中间不会有任何的空白。就好像中间的那个table从来不存在过一样。

    展开全文
  • display:none和visibility:hidden两者的区别

    万次阅读 多人点赞 2018-06-24 23:01:01
    但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。 display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的...

    使用css让元素不可见的方法有很多种,裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。

    display与元素的隐藏

    如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击,无法使用屏幕阅读器等辅助设备访问,占据的空间消失。    

    <body>
        <div>
            <strong>给元素设置display:none样式</strong>
            <p>A元素</p>
            <p style='display:none;'>B元素</p>
            <p>C元素</p>
        </div>
    </body>

    效果图:

     

    visibility与元素的隐藏

    给元素设置visibility: hidden也可以隐藏这个元素,但是隐藏元素仍需占用与未隐藏时一样的空间,也就是说虽然元素不可见了,但是仍然会影响页面布局。

    <body>
        <div>
            <strong>给元素设置visibility:hidden样式</strong>
            <p>A元素</p>
            <p style='visibility:hidden;'>B元素</p>
            <p>C元素</p>
        </div>
    </body>

    效果图:

     

    display: none与visibility: hidden的区别

    很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间,而visibility: hidden隐藏后的元素空间依旧保留 ,实际上没那么简单,visibility是一个非常有故事性的属性

    1、visibility具有继承性,给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

    2、visibility: hidden不会影响计数器的计数,如图所示,visibility: hidden虽然让一个元素不见了,但是其计数器仍在运行。这和display: none完全不一样

        <body>
            <div>
                <strong>给元素设置visibility:hidden样式</strong>
                <ol>
                    <li>元素1</li>
                    <li style="visibility:hidden;">元素2</li>
                    <li>元素3</li>
                    <li>元素4</li>
                </ol>
            </div>
            <div>
                <strong>给元素设置display:none样式</strong>
                <ol>
                    <li>元素1</li>
                    <li style="display:none;">元素2</li>
                    <li>元素3</li>
                    <li>元素4</li>
                </ol>
            </div>
        </body>

    3、CSS3的transition支持visibility属性,但是并不支持display,由于transition可以延迟执行,因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

     

    文章每周持续更新,可以微信搜索「 前端大集锦 」第一时间阅读,回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

    展开全文
  • 因为那些文章千篇一律都说的是 v-if 与 v-show, display:none 与 visibility:hidden各自的关系,而对于v-if与display,v-show与display的关系说得不是很清楚,所以写下这篇小记。 v-if :让Dom 节点直接消失。 v-...

    前言:网上有很多相似的内容,为啥我还再写一篇?因为那些文章千篇一律都说的是 v-if 与 v-show, display:none 与 visibility:hidden各自的关系,而对于v-if与display,v-show与display的关系说得不是很清楚,所以写下这篇小记。

    v-if :让Dom 节点直接消失。(即:视觉上看不到,也没有位置,dom节点也不在。)

    v-show: 调用display:none 来控制元素是否展示。

    display:none --> 物理空间消失,但是dom还在(即:视觉上看不到,也没有位置,但是dom节点还在)。

    visibility:hidden; -->物理空间以及dom都还在(即:视觉上看不到,但位置它还站着,但是dom节点还)。

     
    综上所述:V-if与display:none的区别就是:

    v-if = display:none + 干掉其Dom节点

     
    示意图:

    visibility:hidden;视觉上消失,但是还占着位置。
    visibility:hidden 虽然看不到,还是位置还占着

    display:none;视觉上消失,也不占位置,但Dom节点还在。
    display:none Dom节点还在

    拓展:

    Html style="visibility:hidden"与style="display:none"的区别

    <html>
      <head>
      <title>style="visibility:hidden"与style="display:none"的区别</title>
      </head>
     
      <body>
        <span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>
        <span style="display:none; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span><br/>
      </body>
    </html>
    

    参考资料:
    Html style="visibility:hidden"与style="display:none"的区别

    展开全文
  • 关于display:none和display:block的问题 如果使用了display:none,会使该标签消失;可以通过display:block重新恢复该标签。但是这里有一个问题,使用了display:none之后会使该标签原本的样式被清除,所以就算重新...

    关于display:none和display:block的问题

    如果使用了display:none,会使该标签消失;可以通过display:block重新恢复该标签。但是这里有一个问题,使用了display:none之后会使该标签原本的样式被清除,所以就算重新恢复标签也不会恢复原本的样式。

    解决办法:

    不要直接令某一个标签的display属性设置为none,应当用一个div标签将要消失的标签包起来,然后通过该div标签的display来实现内部标签的隐藏和恢复,这样就不会破坏原本的样式了。

    ————————————————
    原文链接:https://blog.csdn.net/lewky_liu/article/details/77448983

    展开全文
  • 话不多说先上代码.index-detail-list .item-contain{ ... display: none; overflow: hidden; padding: 14px 14px 9px; border: 1px solid #ececec; } .index-detail-list .item-contain.active{ display: bl
  • display:none和display:block来…

    千次阅读 2017-02-23 17:27:11
    display:none和display:block来控制层的显示
  • display:none和visibility:none的区别

    千次阅读 2016-07-31 12:13:36
    联系:它们都能让元素不可见区别:display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间; visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见 display: none;...
  • display:none与visible:hidden display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐...
  • 使用盒子模型display:flex后,子元素用display:none,display:block会出现失效。 解决办法:在子元素中外面加个div标签
  • CSS的display:none与visibility:hiddendisplay:nonevisibility:hidden display:none display:none彻底不显示元素,元素不占空间,等于没有。 visibility:hidden visibility:hidden只是把元素隐藏不显示,仍然占有原来...
  • Display:none详解display:none的用处display:none的实例visibility:hidden也可以隐藏元素display:none的注意事项 display:none的用处 display:none 一般用于JavaScript动态隐藏元素,值得注意的是:被隐藏的元素不...
  • display: none、visibility: hidden与opacity: 0的区别2. 补充:其他隐藏元素的方法 1. display: none、visibility: hidden与opacity: 0的区别 display: none、visibility: hidden与opacity: 0都可以让元素隐藏,...
  • display:none和visibility:hidden他们属性相同之处都是隐藏元素。 但是我们透过表面看本质,就会发现他们两有个不同之处,首先display:none。隐藏的元素消失不会占据空间也不会影响布局。 如果给父级元素设置display...
  • display:none; 和 visibility:hidden 的区别 看了张鑫旭老师的 《CSS世界》一书,对 display:none 和 visibility:hidden 的区别整理如下: display:none 隐藏 display: none 是真正意义上的隐藏,当一个元素设置...
  • display:none和visibility:hidden的区别是: 1.display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该...
  • 在需要隐藏的盒子外面再套一个大盒子即可 .topLeft a:hover+.timTOP { display: block; } .timTOP{ display: none; } .timTOP:hover{ display: block; }
  • 隐藏元素的方法有很多,比如:让元素变透明:opcity:0,设置display:none,或设置visibility:hidden。 1、display:none 给元素设置了display:none后,那么该元素及其后代都会被隐藏,在页面中看不见点不到,但是它还...
  • 解决display:none

    2020-11-09 17:38:27
    selenium:解决页面元素display:none的方法 在UI自动化测试中,有时候会遇到页面元素无法定位的问题,包括xpath等方法都无法定位,是因为前端元素被设置为不可见导致。 这篇博客,介绍下如何通过JavaScript修改页面...
  • 如果祖先元素遭遇某祸害,则其子孙孙无一例外也要遭殃,比如:opacity:0和display:none,若父节点元素应用了opacity:0和display:none,无论其子孙元素如何挣扎都不会再出现在大众视野;而若父节点元素应用visibility...
  • display:none:使元素脱离文档流,不占据原来的空间,会引起页面的重排 visibility:hidden:不会脱离文档流,元素不可见仍然占据原来的位置 opacity:0:同 visibility:hidden 继承 display:none:子元素仍具有 ...
  • CSS: display: none和visibility: hidden的区别: 通俗的说法:display: none不占用原来的位置,而visibility: hidden保留原来的位置。 问题:为什么display: none不占用原来的位置,但可以用js操作元素节点呢? ...
  • 很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间,而visibility: hidden隐藏后的元素空间依旧保留 ,实际上没那么简单,visibility是一个非常有故事性...
  • display:none和visibility:hidden的区别是: 1.display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该...
  • 请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibility:hidden保留原来的位置后,面试官就会心一笑呢?其实不止那么简单呢!本文我们将一起深究它俩的恩怨...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,367
精华内容 13,346
关键字:

display:none