Lernen Sie neue CSS-Funktionen kennen: Directional Clipping overflow:clip

In diesem Artikel wird eine neue Funktion vorgestellt: Ab Chrome 90 gibt es eine neue Funktion: overflow: clip. Verwenden Sie diese, um die Überlaufrichtung einfach zu steuern. 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

Überlauf :clip warum

Lassen Sie uns zunächst kurz die Verwendung von overflow: clip vorstellen.

overflow: clip: Die Ausdrucksform von overflow: versteckt ist sehr ähnlich. Sie schneidet auch die padding-box des Elements ab. [Teilen von Lernvideos: CSS-Video-Tutorial

, web front-end

】

🎜Sie haben jedoch zwei Unterschiede:🎜

• 🎜Das heißt, overflow: clip verbietet intern jegliche Form des Scrollens vollständig. Natürlich steht dies heute nicht im Mittelpunkt, also lassen wir es vorerst überspringen. 🎜

🎜🎜MDN Originaltext: Der Unterschied zwischen Clip und Hidden besteht darin, dass das Clip-Schlüsselwort auch jegliches Scrollen, einschließlich programmatisches Scrollen, verbietet.🎜

• 🎜overflow: clip kann das Ausschneiden aus der x- und y-Achsenrichtung steuern, overflow: versteckt jedoch nicht. 🎜

🎜Der Punkt ist dieser. Lassen Sie uns kurz veranschaulichen: 🎜

overflow: clip && overflow: versteckte Leistung

🎜Werfen wir einen Blick auf die Leistung von Unabhängig von der Richtung lauten die Ausdrücke von overflow: clip und overflow: versteckt: 🎜rrreeerrreee🎜Wir haben drei DIV-Container eingerichtet, von denen einer keinen Überlauf setzt, und der Die anderen beiden setzen jeweils overflow: clip und overflow: versteckt. Der Effekt ist wie folgt: 🎜🎜 🎜🎜dieser Zeitpunkt verhält sich overflow: clip genauso wie overflow: versteckt. 🎜

overflow: clip individuell auf der x/y-Achse einstellbar h3 >🎜Der Unterschied zu overflow: clip besteht jedoch darin, dass es separat auf die x-Achse oder die y-Achse eingestellt werden kann, sodass der Container in eine bestimmte Richtung abgeschnitten werden kann. aber in die entgegengesetzte Richtung, was einen Überlauf ermöglicht. 🎜🎜Schauen Sie sich diese DEMO an: 🎜🎜🎜🎜Das Phänomen hier ist erwähnenswert: 🎜

• 🎜Einzeleinstellung overflow-x: versteckt oder overflow- y: versteckt, der Ausdruck stimmt mit overflow: versteckt überein, was ein Allround-Zuschneiden 🎜
• 🎜 und ein Überlauf in der horizontalen x- oder vertikalen Richtung ist y-Richtung -x: Clip/ overflow-y: clip in Kombination mit overflow-x: sichtbar in einer anderen Richtung kann einen Überlauf in eine Richtung ermöglichen und einen Überlauf nach innen bewirken die andere Richtung. 🎜

🎜Die beiden oben genannten Punkte müssen erklärt werden: 🎜

• 🎜Setzen Sie overflow: versteckt und es wird BFC erstellt, Sie können es also nicht auf nur eine Richtung beschränken, und overflow: clip erstellt kein BFC, sodass sie (zum Beispiel) in vielen Aufführungen inkonsistente Phänomene erzeugen 🎜 li>
• 🎜 Wenn „overflow-x/y“ auf „versteckt“ eingestellt ist, wird „overflow-y/x“ automatisch, auch wenn es auf „sichtbar“ eingestellt ist🎜

🎜Für die vollständige DEMO können Sie dies tun Klicken Sie hier: CodePen-Demo – Überlauf: versteckt & Überlauf: Clip🎜🎜🎜An diesem Punkt haben wir Folgendes erreicht ein Effekt, der es Elementen ermöglicht, sich in der x/y-Richtung zu bewegen. Einseitiges Zuschneiden auf der Seite, wie folgt: 🎜🎜🎜🎜(Das obige Bild ermöglicht einen Überlauf in der x-Achsenrichtung und die y-Achsenrichtung ist beschnitten)🎜

Nach oben, unten, links, rechts Zuschneiden in eine einzige Richtung

🎜OK, wenn Sie dann noch einen Schritt weiter gehen. Wenn beispielsweise die Anforderung besteht, dass ein Überlauf in die obere, linke und rechte Richtung zulässig ist, in der unteren Richtung jedoch ein Beschneiden erforderlich ist, kann dies erreicht werden? 🎜🎜Die Antwort ist ja. 🎜🎜Es gibt tatsächlich viele Möglichkeiten, Elemente in CSS zuzuschneiden, und die ungefähre Implementierung ähnelt der Funktion von overflow: versteckt. 🎜🎜Zum Beispiel können wir clip-path verwenden, um eine unidirektionale Beschneidung von oben, unten, links und rechts zu erreichen. Dies ist der Inhalt meines vorherigen Artikels – 🎜So implementieren Sie Overflow: Hidden🎜, ohne Overflow: Hidden zu verwenden. Wenn Sie interessiert sind, können Sie einen Blick darauf werfen. 🎜🎜🎜Ursprüngliche Adresse: https://www.cnblogs.com/coco1s/p/16627152.html🎜🎜Autor: ChokCoco🎜

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonLernen Sie neue CSS-Funktionen kennen: Directional Clipping overflow:clip. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!