新闻详情
再讲clip：深入了解clip的渲染
20-04-10查阅次数：692 次
上面关于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隐藏有了瑕疵，好在通常使用场景是看不到这个差异的，故影响甚微。
