CSS に含まれる構文の使用シナリオ

WBOY
リリース: 2024-02-21 14:00:06
オリジナル
1350 人が閲覧しました

CSS に含まれる構文の使用シナリオ

CSS での contains の構文使用シナリオ

CSS では、contain は、要素のコンテンツが外部のスタイルやレイアウトから独立しているかどうかを指定するために使用される便利な属性です。 。これは、開発者がページ レイアウトをより適切に制御し、パフォーマンスを最適化するのに役立ちます。この記事では、contain 属性の構文使用シナリオを紹介し、具体的なコード例を示します。

contain 属性の構文は次のとおりです。

contain: layout|paint|size|style|'none'|'strict'|'content';
ログイン後にコピー
  1. layout: 要素のレイアウトが他の要素から独立しているかどうかを指定します。レイアウトに設定すると、レイアウトのパフォーマンスを向上させることができます。 contains 属性を使用してレイアウトの独立性を実現するサンプル コードは次のとおりです。
<style>
    .container {
        contain: layout;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
ログイン後にコピー
  1. paint: 要素が他の要素から独立して描画されるかどうかを指定します。ペイントに設定すると描画パフォーマンスを向上させることができます。 contains 属性を使用して描画の独立性を実現するサンプル コードは次のとおりです。
<style>
    .container {
        contain: paint;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
ログイン後にコピー
  1. size: 要素のサイズが他の要素から独立しているかどうかを指定します。 size に設定すると、サイズ計算のパフォーマンスを向上させることができます。 contains 属性を使用してサイズの独立性を実現するサンプル コードは次のとおりです。
<style>
    .container {
        contain: size;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
ログイン後にコピー
  1. style: 要素のスタイルが他の要素から独立しているかどうかを指定します。 style に設定すると、スタイルの計算パフォーマンスを向上させることができます。 contains 属性を使用してスタイルの独立性を実現するサンプル コードは次のとおりです。
<style>
    .container {
        contain: style;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
ログイン後にコピー
  1. none: contains 属性が適用されないことを示します。 none を使用したサンプル コードは次のとおりです。
<style>
    .container {
        contain: none;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
ログイン後にコピー
  1. strict: すべての contains 関数が適用されることを示します。 strict を使用するサンプル コードは次のとおりです。
<style>
    .container {
        contain: strict;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
ログイン後にコピー
  1. content: 要素のコンテンツが他の要素から独立しているかどうかを指定します。コンテンツに設定すると、コンテンツのレンダリングのパフォーマンスを向上させることができます。 contains 属性を使用してコンテンツの独立性を実現するサンプル コードは次のとおりです。
<style>
    .container {
        contain: content;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
ログイン後にコピー

要約すると、CSS での contains 属性の使用シナリオは、レイアウト、描画、サイズ、スタイル、内容。 contains 属性を設定すると、特定の側面において要素を他の要素から独立させることができるため、ページのパフォーマンスと効率が向上します。

以上がCSS に含まれる構文の使用シナリオの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート