建站
咨询
售后
建站咨询
这篇“CSS方向裁切overflow:clip怎么用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“CSS方向裁切overflow:clip怎么用”文章吧。
长宁ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！
overflow: clip 为何
首先，简单介绍下 overflow: clip 的用法。
overflow: clip: 与 overflow: hidden 的表现形式极为类似，也是对元素的 padding-box 进行裁剪。
但是，它们有两点不同：
也就是
overflow: clip内部完全禁止任何形式的滚动。当然，这个不是今天的重点，暂且略过不谈。
MDN 原文：The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
overflow: clip可以从 x，y 轴方向上对裁剪进行，控制，而overflow: hidden不行。
重点在于这一点。我们来简单示意一下：
overflow: clip && overflow: hidden 的表现
我们来看对于不区分方向，overflow: clip 与 overflow: hidden 的表现形式：
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
.hidden {
overflow: hidden;
}
.clip {
overflow: clip;
}我们设置了 3 个 DIV 容器，其中一个不设置 overflow，另外两个分别设置overflow: clip 与overflow: hidden。效果如下：
此时，overflow: clip 与 overflow: hidden 的表现是一致的。
overflow: clip 在 x/y 轴上可单独设置
然而，overflow: clip 的与众不同之处在于，它可以单独设置给 x 轴或者 y 轴，使得容器拥有某一个方向上的裁剪能力，而相对的另外一个方向，允许溢出。
看看这个 DEMO：
这里的现象值得注意：
单单设置
overflow-x: hidden或者overflow-y: hidden，表现形式都和overflow: hidden一致，是全方位的裁剪而水平 x 或竖直 y 方向的
overflow-x: clip/overflow-y: clip配合另一个方向的overflow-x: visible，却能够实现一个方向允许溢出，一个方向实现裁剪！
需要解释一下上面两点：
设置
overflow: hidden就会创建 BFC，因此没法只限制一个方向；而overflow: clip不会创建 BFC，因此它们在很多表现上会产生不一致的现象（譬如）overflow-x/y 设置为 hidden 时, overflow-y/x 会变成 auto, 即使设置为 visible
完整的 DEMO，你可以戳这里：CodePen Demo -- overflow: hidden & overflow: clip
至此，我们就实现了这样一种效果，允许元素在 x/y 方向上的单向裁剪，像是这样：
(上图允许 x 轴方向上的溢出，而 y 轴方向进行了裁剪)
上、下、左、右单个方向上的裁剪
OK，那么，如果再进一步。譬如有这么个需求，要求上、左、右方向允许溢出，而下方向需要裁剪，能做到么？
答案是可以的。
CSS 中其实还有多种方式可以进行元素的裁切，近似的实现类似于 overflow: hidden 的功能。
譬如，其中，我们可以使用 clip-path 实现上、下、左、右 单一方向的裁剪。
以上就是关于“CSS方向裁切overflow:clip怎么用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。
当前文章：CSS方向裁切overflow:clip怎么用
浏览路径：http://lswzjz.com/article/jcipgi.html
