绍兴网站建设-后起网络

新闻详情
01. News
再讲clip:深入了解clip的渲染
2020-04-10查阅次数:

    上面关于clip的知识多浮于表层,如果我们进一步深入,去尝试了解clip属性是如何渲染的,就会发现一些有意思的事情!
 
    我们先看一个示例:
 
    .box{
    width:300px;height:100px;
    background-color:#f0f3f9;
    position:relative;
    overflow:auto;
    }
    .box>img{
    width:256px;height:192px;
    position:absolute;
    }
 
    此时.box为定位元素,因此,滚动条显示得很好,如图6-63所示。如果对图片进行clip剪裁,那效果又将怎样呢? 
 
    .box>img{
    width:256px;height:192px;
    position:absolute;
    clip:rect(0000);
    }
 
    图片显然看不见了,但是注意,在Chrome浏览器下,.box元素的滚动条依旧存在。
 

 
    这个现象很有意思,它说明,至少在Chrome浏览器下,clip仅仅是决定了哪一部分是可见的,对于原来占据的空间并无影响。然而,并不是所有浏览器都这么认为,在IE和Firefox浏览器下是没有滚动条的,只有光秃秃的一小撮背景色在那里。这又是“未定义行为”的表现,看起来IE和Firefox对于clip渲染采用的是另外的方式。
 
    但是无论怎样,下面这些特性大家的认识都是一致的:使用clip进行剪裁的元素其clientWidth和clientHeight包括样式计算的宽高都还是原来的大小,从这一点看,Chrome的渲染似乎更合理。虽然尺寸还是原来的尺寸,但是,隐藏的区域是无法影响我们的点击行为的,说明clip隐藏还是很干脆的。
    最后总结一下:clip隐藏仅仅是决定了哪部分是可见的,非可见部分无法响应点击事件等;然后,虽然视觉上隐藏,但是元素的尺寸依然是原本的尺寸,在IE浏览器和Firefox浏览器下抹掉了不可见区域尺寸对布局的影响,Chrome浏览器却保留了。
 
    Chrome浏览器的这种特性表现实际上让clip隐藏有了瑕疵,好在通常使用场景是看不到这个差异的,故影响甚微。

上一篇:你值得重新认识的clip属性 下一篇:没有了