CSS隐藏元素的差异

来源：互联网发布：提前上班被开除知乎编辑：程序博客网时间：2024/06/01 10:36

一直知道,display:none;不占据空间，而visibility:hidden;和opacity:0;是占据空间的。
但是对于是否可以点击，并未了解过，而此次做项目的过程中，便不巧的遇上了这样的问题。

要实现的效果图如下。
除了轮播以外，还使用了mCustomScrollbar的插件。
地址为：http://manos.malihu.gr/jquery-custom-content-scroller/
需要翻墙，推荐大家使用XX-Net

这里写图片描述

代码如下:

<body>    <div id = "index">              </div>    <div class="team_bg">        <div class="content">            <img class="leader_font" src="../images/leader.png" height="34px"/>        </div>            </div>    <div class="leader">        <div class="content">            <ul id="galary">                            </ul>            <div class="team_footer">                <img src="../images/team_leader.png" onclick="javascript:window.location.href ='techical.html'" />            </div>        </div>    </div></body>

轮播部分进行了简单的封装。

(function($){        var defaults = {            interval: 3000        };        function Carousel($ele, options) {            this.$ele = $ele;            this.options = options = $.extend(defaults, options || {});            this.init();        }        Carousel.prototype = {            constructor: Carousel,            init: function(){                this.renderHtml();                this.bindEvent();                this.interVal();            },            renderHtml: function(){                this.length = this.$ele.find("li").length;                var html = "";                if(this.length > 1){                    for(var i = 0; i < this.length; i++){                        html += "<span></span>";                    }                    this.$ele.append('<div class="tips"> '+html+' </div>');                    this.$ele.find(".tips span:nth-child(1)").addClass("active");                }                this.$ele.find("li:nth-child(1)").addClass("show");                this.$ele.find(".tips span:nth-child(1)").addClass("active");            },            /* 点击事件 */            bindEvent: function(){                var _this_ = this;                this.$ele.find(".tips span").click(function(){                    var index = $(this).index(); //被点击的圆圈的index                    clearInterval(_this_.inter);                    $(this).addClass("active").siblings().removeClass("active");                    _this_.$ele.find("li").eq(index).addClass("show").siblings().removeClass("show");                    _this_.interVal();                });            },            /* 定时器 */            interVal: function(){                               var _this_ = this;                var index = _this_.$ele.find("li.show").index();                               this.inter = setInterval(function(){                    index++;                    index = index == _this_.length ? 0 : index;                    _this_.$ele.find("li").eq(index).addClass("show").siblings().removeClass("show");                    _this_.$ele.find(".tips span").eq(index).addClass("active").siblings().removeClass("active");                }, this.options.interval)            }        }        $.fn.Gallay = function(options){            options = $.extend(defaults, options || {});            return this.each(function(){                new Carousel($(this), options)           });        }    })(jQuery);});

<script>$(function(){    $("#index").load("head.html");    var height = $(window).height()-parseInt($(".team_bg").css("height"));    $(".leader").css({"height":  height < 445 ? 445: height });    $.ajax({        type:"get",        url:urlPath("getHeadIntroduceList"),        async:true,        dataType:"jsonp",        success:function(data){            var html = "";            if(data instanceof Array){                for(var i = 0; i < data.length; i++){                    html += '<li>' +                                 '<div class="img"><img src='+data[i].img_path+'></div>' +                                 '<div class="img_intro">' +                                     '<p>城市综合体价值设计专家</p>' +                                     '<p class="english">VALUE-CENTERED DESIGNERS OF HOPSCA</p>' +                                 '</div>' +                                 '<div class="detail">' +                                     '<div class="introduction">' +                                         '<div class="intro_top">' +                                             '<p class="leader_name">'+ data[i].name+'<span>' + data[i].english_name + '</span></p>' +                                             '<div class="leader_more"><div class="marquee"> ' +data[i].introduce + '</div></div>' +                                         '</div>' +                                         '<div class="intro_bottom">' + data[i].introduce_bottom + '</div>' +                                     '</div>' +                                 '</div>' +                             '</li>';                }                $("#galary").html(html);                $("#galary").Gallay();                $('.leader_more').kxbdSuperMarquee({                    isMarquee:true,                    isEqual:false,                    scrollDelay:300,                    controlBtn:{up:'#goUM',down:'#goDM'},                    direction:'up'                });                $(".intro_bottom").mCustomScrollbar({                    theme: "dark-2"               });            }        }    });

本以为轻松写意的完成了这个页面，但是很快发现了问题。
自定义的滚动条不能滚动！！！只有最后一个li能滚动正常。
于是疑惑，难道一个页面只能由一个滚动条能正常工作？正常的插件都不会这样去实现吧，但是为了验证，我还是重新写了一个页面去验证。结果完全能够正常工作。那么基本排除是插件的问题。那么就跟本页面的某些东西有冲突了。
我第一反应是：难道我自己写得轮播部分对其产生了影响？
但是排查之后发现也不是。
然后我就开始思考CSS样式问题，检查的时候，看到opacity:0;opacity:1.对这比较敏感，思索着该不会是这个地方的问题吧？
于是抱着死马当活马医的想法，我改成了display:none;display:block;然后OK了！！！简直鸡冻呀。
试了一下之后，只要换成是无法点击的隐藏方式都可以成功。

虽然问题是解决了，不过我还是想着必须要对隐藏样式来做一个探究了，它们究竟有哪些区别。。。
首先，我们看看有哪些隐藏元素的方法：

display: none; 不占据空间，无法点击
visibility: hidden; 占据空间，无法点击
position: absolute; top: -999em; 不占据空间，无法点击
position: relative; top: -999em; 占据空间，无法点击
position: absolute; visibility: hidden; 不占据空间，无法点击
height: 0; overflow: hidden;不占据空间，无法点击
opacity: 0; filter:Alpha(opacity=0); 占据空间，可以点击
position: absolute; opacity: 0; filter:Alpha(opacity=0); 不占据空间，可以点击

然后我再了解一下区别：

display:none和visibility: hidden的区别(即:占据空间和不占据空间的区别)
1、display:none占据空间，visibility: hidden不占据空间
2、display:none会产生回流和重绘，而visibility没有这个问题，回流和重绘会影响到前端的性能
3、前两点，相信很多人都是知道的，然后第三点的“株连性”想必不少人都不知道，包括我自己。
display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。
我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。但是如果我们给子孙元素应用了visibility:visible,那么这个子孙元素又会显现出来。

本次项目中我使用了Sass和Compass，我郑重的向大家推荐，因为真的是越用越喜欢啊，O(∩_∩)O哈哈~

1 0