新しい CSS 機能を学習します: 方向クリッピング オーバーフロー:クリップ

この記事では、Chrome 90 からオーバーフローに追加された新機能である overflow:clip を紹介します。これを使用すると、オーバーフローの方向を簡単に制御できます。

overflow:clipなぜ

まずは、overflow:clipの使い方を簡単に紹介します。

overflow:clip: は overflow:hidden に非常に似ており、要素の padding-box もクリップします。 [学習ビデオ共有: css ビデオ チュートリアル 、Web フロントエンド ]

ただし、これらには 2 つの違いがあります:

• # つまり、

  overflow:clip は内部的にいかなる形式のスクロールも完全に禁止します。もちろん、これは今日の焦点では​​ないので、今回は飛ばしましょう。

##MDN 原文: クリップと非表示の違いは、クリップ キーワードによって、プログラムによるスクロールを含むすべてのスクロールも禁止されることです。

• overflow:clip

  は x 軸および y 軸方向からのクリッピングを制御できますが、overflow:hidden は制御できません。

ポイントはこれです。簡単に説明しましょう:

オーバーフロー: クリップ && オーバーフロー: 隠れたパフォーマンス

方向を区別しないパフォーマンスを見てみましょう。

オーバーフロー: クリップ

式overflow: hidden: <pre class="brush:php;toolbar:false">&lt;div&gt;     &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. &lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;hidden&quot;&gt;     &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. &lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;clip&quot;&gt;     &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. &lt;/p&gt; &lt;/div&gt;</pre> <pre class="brush:php;toolbar:false">.hidden {     overflow: hidden; } .clip {     overflow: clip; }</pre> を含むフォーム 3 つの DIV コンテナを設定します。そのうちの 1 つはオーバーフローを設定せず、他の 2 つは

overflow:clip

と # を設定します。 ##オーバーフロー: 非表示。結果は次のとおりです。

この時点では、overflow:clip

は

overflow:hidden と同じように動作します。

overflow:clip

はx/y軸で個別に設定できますただし、overflow:clip

は一意です違いは、x 軸または y 軸に個別に設定できるため、コンテナーは特定の方向にクロップしながら、他の方向へのオーバーフローを許可できることです。

このデモを見てください:

ここでの現象は注目に値します:

単一設定

overflow -x: hidden
• または

  overflow-y: hidden、式は overflow: hidden (オールラウンド クロッピング ##) と一致します。 #水平 x または垂直 y 方向

  overflow-x:clip
/
• overflow-y:clip

  は他の方向と一致します overflow-x:visible 、ただし、一方向のオーバーフローを許可し、一方向のクロップを許可することができます。 上記の 2 つの点について説明する必要があります。

Setting

overflow: hidden

will create BFC will create a BFC, so there is a BFC.一方向のみを制限する方法はありません。
• overflow:clip

  は BFC を作成しないため、多くのパフォーマンスで一貫性のない現象が発生します (例) overflow-x /y hidden に設定すると、overflow-y/x は、visible に設定されていても自動になります。

• 完全なデモについては、ここをクリックしてください:

  CodePen デモ-- オーバーフロー: 非表示 & オーバーフロー: クリップ

この時点で、このような効果が得られ、次のように x/y 方向の一方向の要素のクリップが可能になります。

#(上図は x 軸方向のオーバーフローを許可し、y 軸方向のトリミングを実行します)

上、下でのトリミング、左、右の方向

OK、では、さらに進みます。たとえば、上、左、右の方向ではオーバーフローが許可されるが、下方向ではクロップが必要であるという要件がある場合、これは実現できますか?

答えは「はい」です。

CSS で要素を切り取る方法は実際にはたくさんありますが、おおよその実装は

overflow: hidden

の関数に似ています。

たとえば、

clip-path を使用して、上下左右の単一方向のクリップを実現できます。前回の記事 overflow:hiddenを使わずにoverflow:hiddenを実装する方法

の内容ですので、興味のある方はご覧ください。

元のアドレス: https://www.cnblogs.com/coco1s/p/16627152.html著者: ChokCoco

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

以上が新しい CSS 機能を学習します: 方向クリッピング オーバーフロー:クリップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。