새로운 CSS 기능 알아보기: 방향 클리핑 오버플로:클립

이 글에서는 Chrome 90부터 새로운 기능인 overflow:clip을 사용하여 오버플로 방향을 쉽게 제어할 수 있습니다. 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>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<div>
    <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

오버플로 : 클립 왜

먼저 overflow:clip 사용법을 간략하게 소개하겠습니다.

overflow:clip:은 요소의 padding-box도 잘라낸다는 점에서 overflow:hidden과 매우 유사합니다. [학습 동영상 공유: css 동영상 튜토리얼

, web front-end

】

🎜그러나 두 가지 차이점이 있습니다: 🎜

• 🎜즉, overflow:clip은 내부적으로 모든 형태의 스크롤을 완전히 금지합니다. 물론 이것은 오늘의 초점이 아니므로 지금은 건너뛰도록 하겠습니다. 🎜

🎜🎜MDN 원본 텍스트: 클립과 숨김의 차이점은 클립 키워드가 프로그래밍 방식 스크롤을 포함한 모든 스크롤도 금지한다는 것입니다.🎜

• 🎜overflow: Clip은 x 및 y축 방향의 클리핑을 제어할 수 있지만 overflow: hide는 제어할 수 없습니다. 🎜

🎜요점은 이것이다. 간단히 설명하자면: 🎜

overflow: 클립 && 오버플로: 숨겨진 성능

🎜의 성능을 살펴보겠습니다. 방향에 관계없이 overflow:clip 및 overflow:hidden의 표현은 다음과 같습니다. 🎜rrreeerrreee🎜DIV 컨테이너 3개를 설정했는데 그 중 하나는 오버플로를 설정하지 않았고 다른 두 개는 각각 overflow:clip 및 overflow:hidden을 설정합니다. 효과는 다음과 같습니다: 🎜🎜 🎜🎜이 경우 overflow:clip은 overflow:hidden과 동일하게 동작합니다. 🎜

overflow: 클립 x/y축에 개별적으로 설정 가능 h3 >🎜그런데 overflow:clip의 차이점은 x축이나 y축을 따로 설정할 수 있어서 컨테이너가 특정 방향으로 클리핑할 수 있는 기능이 있다는 점인데, 하지만 반대 방향으로 오버플로가 허용됩니다. 🎜🎜이 데모를 확인하세요: 🎜🎜🎜🎜여기서 나타나는 현상은 주목할 가치가 있습니다: 🎜

• 🎜단일 설정 overflow-x: Hidden 또는 overflow- y : 숨김, 표현식은 전체 자르기 🎜
• 🎜 및 가로 x 또는 세로의 오버플로인 <code>overflow: Hidden과 일치합니다. y 방향 -x: 클립/ overflow-y: 클립을 다른 방향의 overflow-x: visible과 결합하면 한 방향으로 오버플로를 허용하고 다음 방향에서 오버플로를 달성할 수 있습니다. 다른 방향으로 자르기! 🎜

🎜위의 두 가지 사항을 설명해야 합니다. 🎜

• 🎜overflow:hidden 설정 BFC를 생성하므로 한 방향으로만 제한할 수 없으며 overflow:clip은 BFC를 생성하지 않으므로 여러 공연에서 일관성 없는 현상이 발생합니다(예를 들어) 🎜 li>
• 🎜 Overflow-x/y가 숨김으로 설정되면, Overflow-y/x가 표시로 설정되어 있어도 자동이 됩니다🎜

🎜전체 데모를 위해 다음을 수행할 수 있습니다. 여기를 클릭하세요: CodePen Demo -- Overflow: Hidden & Overflow: Clip🎜🎜🎜이 시점에서 우리는 다음과 같은 목표를 달성했습니다. 요소가 x/y 방향으로 이동할 수 있도록 하는 효과입니다. 다음과 같이 페이지에서 단방향 자르기: 🎜🎜🎜🎜(위 그림은 x축 방향으로 Overflow를 허용하고, y축 방향으로 잘랐습니다)🎜

위, 아래, 왼쪽, 오른쪽 한 방향으로 자르기

🎜좋아, 그러면 한 단계 더 나아가면 됩니다. 예를 들어 위쪽, 왼쪽, 오른쪽 방향에서는 오버플로를 허용해야 하는 요구 사항이 있지만 아래쪽 방향에서는 자르기가 필요한 경우 이를 달성할 수 있을까요? 🎜🎜답은 그렇습니다. 🎜🎜CSS에서 요소를 자르는 방법은 실제로 여러 가지가 있으며 대략적인 구현은 overflow:hidden 기능과 유사합니다. 🎜🎜예를 들어 clip-path를 사용하면 위, 아래, 왼쪽, 오른쪽의 단일 방향 클리핑을 달성할 수 있습니다. 이것은 내 이전 기사의 내용입니다. 🎜overflow: Hidden을 구현하는 방법🎜 관심이 있으시면 살펴보실 수 있습니다. 🎜🎜🎜원본주소 : https://www.cnblogs.com/coco1s/p/16627152.html🎜🎜작성자 : ChokCoco🎜

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 새로운 CSS 기능 알아보기: 방향 클리핑 오버플로:클립의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!