CSS overflow-clip-margin属性简介 « 张鑫旭-鑫空间-鑫生活

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10322 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

喜多川封面图

在介绍 overflow-clip-margin 属性之前肯定要先介绍下 overflow:clip 声明。

一、overflow:clip介绍

CSS overflow:clip声明可以让元素溢出容器的时候隐藏，同时不会有滚动定位等行为。

要讲清楚 overflow:clip 最好的方法就是和 overflow:hidden 属性做对比。

请看下面的例子，两段 <div> 元素容器，里面有图片和文字，尺寸超过了容器的高度限制，其中一个设置的是 overflow:clip，另外一个是 overflow:hidden：

<div class="box clip">
    <img src="mm9.jpg">
    <p>鑫空间鑫生活</p>
</div>

<div class="box hidden">
    <img src="mm9.jpg">
    <p>鑫空间鑫生活</p>
</div>

CSS 代码如下：

.box {
    height: 200px;
    max-width: 480px;
    outline: 1px solid;
    scroll-behavior: smooth;  
}
.clip {
    overflow: clip;
}
.hidden {
    overflow: hidden;    
}

此时，两者的渲染效果没有任何区别，如下所示：

默认剪裁效果一致 overflow

但是，此时，如果改变 .box 元素的 scrollTop 值，则两者的区别就显示出来了，例如，我们点击某个按钮，让 scrollTop 值非常大，则会有如下所示的效果，设置 overflow:hidden 的容器滚动到了底部，而设置了 overflow:clip 的容器纹丝不动。

对比区别

也就是 overflow:clip 隐藏的同时阻止了容器的滚动。

眼见为实，您可以狠狠地点击这里：oveflow:clip和hidden区别对比demo

兼容性

其兼容性如下所示：

overflow-clip 兼容性

Safari 浏览器已经计划支持了，以后大规模使用指日可待。

二、overflow-clip-margin的作用

overflow-clip-margin 属性要想生效，需要元素设置了 overflow:clip，作用是可以让容器的隐藏区域在容器之外，例如还是上面那个案例，如果是下面的代码，会有怎么样的效果呢？

<div class="box-clip">
    <img src="mm9.jpg">
    <p>鑫空间鑫生活</p>
</div>

.box-clip {
    height: 200px;
    outline: solid;
    overflow: clip;
    overflow-clip-margin: 30px;
}

此时就会有如下图所示的效果：

overflow-clip-margin效果截图

眼见为实，您可以狠狠地点击这里：overflow-clip-margin基本作用和效果demo

一些细节知识

水平方向同时适用，也就是如果是针对水平方向的剪裁，右侧也可以有偏移，就像下图这样：
不支持负值，和常用的 margin 属性不同，overflow-clip-margin 属性不支持负值。
overflow-clip-box属性可以说和overflow-clip-margin 属性没有任何关系，overflow-clip-box 属性是一个非标准，用来指定剪裁的盒子是 border-box，还是 padding-box、content-box 这些，仅 Firefox 浏览器支持，以后也不会支持，无需特别关注，但是 overflow-clip-margin 属性不同。