Apprenez de nouvelles fonctionnalités CSS : Débordement de découpage directionnel : clip-tutoriel CSS-php.cn

Apprenez de nouvelles fonctionnalités CSS : Débordement de découpage directionnel : clip

青灯夜游

Libérer： 2022-10-11 19:12:09

avant

2320 Les gens l'ont consulté

Cet article présentera une nouvelle fonctionnalité. À partir de Chrome 90, le débordement a une nouvelle fonctionnalité - overflow : clip. Utilisez-la pour contrôler facilement la direction du débordement. overflow: clip，使用它，轻松的对溢出方向进行控制。

Apprenez de nouvelles fonctionnalités CSS : Débordement de découpage directionnel : clip

overflow: clip 为何

首先，简单介绍下 overflow: clip 的用法。

overflow: clip: 与 overflow: hidden 的表现形式极为类似，也是对元素的 padding-box 进行裁剪。【学习视频分享：css视频教程、web前端】

但是，它们有两点不同：

也就是 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 的表现形式：

<div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<div class="hidden">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<div class="clip">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>

Copier après la connexion

.hidden {
    overflow: hidden;
}
.clip {
    overflow: clip;
}

Copier après la connexion

我们设置了 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

débordement : clip Pourquoi

Tout d'abord, présentons brièvement l'utilisation de overflow: clip.

overflow: clip : La forme d'expression de overflow: Hidden est très similaire. Elle coupe également la padding-box de l'élément. [Partage de vidéos d'apprentissage : tutoriel vidéo CSS
, web front-end
】
🎜Cependant, ils ont deux différences :🎜
🎜C'est-à-dire que overflow: clip interdit complètement toute forme de défilement en interne. Bien sûr, ce n’est pas le sujet d’aujourd’hui, alors laissons cela de côté pour l’instant. 🎜
🎜🎜MDN Texte original : La différence entre clip et masqué est que le mot-clé clip interdit également tout défilement, y compris le défilement programmatique.🎜

🎜overflow: clip peut contrôler le découpage dans les directions des axes x et y, mais overflow: Hidden ne le peut pas. 🎜

🎜Le point est le suivant. Illustrons brièvement : 🎜

overflow : clip && overflow : performances cachées

🎜Jetons un coup d'œil aux performances de Quelle que soit la direction, les expressions de overflow: clip et overflow: Hidden sont : 🎜rrreeerrreee🎜Nous avons mis en place 3 conteneurs DIV, dont un ne définit pas le débordement, et le deux autres respectivement Définissez overflow: clip et overflow: Hidden. L'effet est le suivant : 🎜🎜

🎜🎜this Quand, overflow: clip se comporte de la même manière que overflow: Hidden. 🎜

`overflow : clip` peut être défini individuellement sur l'axe x/y

🎜Cependant, ce qui est différent avec overflow: clip, c'est qu'il peut être réglé séparément sur l'axe des x ou sur l'axe des y, de sorte que le conteneur ait la capacité de clipser un certain sens, mais dans le sens opposé, permettant le débordement. 🎜🎜Découvrez cette DÉMO : 🎜🎜

🎜🎜Le phénomène ici mérite d'être noté : 🎜

🎜Réglage unique overflow-x : caché ou overflow- y : caché, l'expression est cohérente avec overflow: Hidden, qui est un recadrage omnidirectionnel🎜
🎜 et overflow dans la direction horizontale x ou verticale y -x: clip/ overflow-y: clip combiné avec overflow-x: visible dans une autre direction peut permettre un débordement dans un sens et obtenir un débordement dans l'autre direction. 🎜

🎜Les deux points ci-dessus doivent être expliqués : 🎜

🎜Définir overflow : caché et cela créera BFC, vous ne pouvez donc pas le limiter à une seule direction ; et overflow: clip ne crée pas de BFC, ils produiront donc des incohérences dans de nombreuses performances (par exemple) 🎜
🎜 Lorsque overflow-x/y est défini sur caché, overflow-y/x deviendra auto, même s'il est défini sur visible🎜

🎜Pour la DÉMO complète, vous pouvez cliquer sur ici : Démo CodePen -- overflow : caché & overflow : clip🎜🎜🎜À ce stade, nous avons atteint un tel effet, permettant aux éléments de se déplacer dans la direction x/y Recadrage unidirectionnel sur la page, comme ceci : 🎜🎜