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

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，使用它，轻松的对溢出方向进行控制。

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>

.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

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 : 🎜🎜🎜🎜(L'image ci-dessus permet un débordement dans la direction de l'axe x et est recadrée dans la direction de l'axe y)🎜

Haut, bas, gauche, droite Recadrage dans une seule direction

🎜OK, alors si vous allez plus loin. Par exemple, s’il est nécessaire que le débordement soit autorisé dans les directions supérieure, gauche et droite, mais que le recadrage soit requis dans la direction inférieure, est-ce possible ? 🎜🎜La réponse est oui. 🎜🎜Il existe en fait de nombreuses façons de recadrer des éléments en CSS, et l'implémentation approximative est similaire à la fonction de overflow: Hidden. 🎜🎜Par exemple, nous pouvons utiliser clip-path pour obtenir un découpage unidirectionnel vers le haut, le bas, la gauche et la droite. C'est le contenu de mon article précédent - 🎜Comment implémenter le débordement : caché🎜 sans utiliser le débordement : caché Si vous êtes intéressé, vous pouvez y jeter un œil. 🎜🎜🎜Adresse originale : https://www.cnblogs.com/coco1s/p/16627152.html🎜🎜Auteur : ChokCoco🎜

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!