Better than yesterday-前端【display:none与visibility:hidden;】

2019-08-14 admin

display:none;与visibility:hidden;


  • 区别:

    display:none;元素并不会占据任何物理空间,但是visibility:hidden只是看不到,但是物理上还是存在的【也就是说如果使用display:none;原本该元素占用的空间会在页面布局上消失】


实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>display:none与vivibility:hidden实践</title>
    </head>
    <style type="text/css">
            div
            {
                width:200px;
                height: 100px;
                border: 2px solid black;
            }
            .first
            {
                display: none;
            }
            .hidden
            {
                visibility: hidden;
            }
    </style>
    <body>
        <div class="first">
            第一个div设置display:none
        </div>
        <div>
            第二个div
        </div>
        <div class="hidden">
            第三个div设置visibility:hidden
        </div>
        <div>
            第四个div
        </div>
    </body>
</html>

实现效果

display:none;visibility:hidden;

显而易见的是,第一个div设置了display:none;所以第一个divc从页面布局中消失了 相对的第三个div设置了visibility:hidden;虽然看不到了但是保留了原有的宽高


美句赏析:

I want all of you,forever,You and me,every day. 我想完全拥有你,你和我,每一天,直到永远。


**希望从现在开始养成写文章的习惯,为了比昨天更好**

[转载]原文链接:https://segmentfault.com/a/1190000020071664

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72496.html

文章标题:Better than yesterday-前端【display:none与visibility:hidden;】

相关文章
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
移动端网页设计经验与心得
智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计简单。 现在情况就大不相同了,软件上we...
2015-12-23
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
javascript:;与javascript:void(0)区别
javascript:;直接返回undefined javascript:void(0);要去执行一次表达式“0”,然后返回undefined ...
2017-05-12
Bootstrap显示与隐藏简单实现代码
本文实例为大家分享了bootstrap显示隐藏的具体代码,供大家参考,具体内容如下 &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;meta http...
2017-03-14
性能与生态双突破 HTML5重现爆发曙光
走过早熟的WebAPP,也经历过概念性的“轻应用”,HTML5这个被视作移动互联网未来的技术标准,终于在2015年看到了爆发的曙光。1月 15日,搜狐发布基于HTML5的“手机搜狐网3.0,加上微信几天前开放HTML5接口,HTML5很可能...
2015-11-12
2015年预测:Web体验与以往的五大不同
在过去的一年,我们见证了Uber的崛起、Apple加入了可穿戴设备的竞赛中、以及诸如Facebook收购Whatapp这类大的并购事件。那么在2015年我们将看到哪些巨大的改变?这里列出了五个对未来的预测 更清洁、简单的内容 2013年...
2015-11-11
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
前端开发领域推荐关注的微信公众号
这篇文章分享了前端领域的多个值得关注的技术、设计、极客、创业相关微信公众号。其中有最受欢迎的热门公众号、也有专注某个技术或设计的公众号,涵盖:算法、JavaScript、Nodejs、程序员、Web前端、Linux、数据库、创业、UI设计和...
2017-03-23
回到顶部