CSS에 포함된 구문 사용 시나리오

CSS에서 포함의 구문 사용 시나리오

CSS에서 포함은 요소의 콘텐츠가 외부 스타일 및 레이아웃과 독립적인지 여부를 지정하는 데 사용되는 유용한 속성입니다. 이는 개발자가 페이지 레이아웃을 더 잘 제어하고 성능을 최적화하는 데 도움이 됩니다. 이 문서에서는 포함 특성의 구문 사용 시나리오를 소개하고 특정 코드 예제를 제공합니다.

contain 속성의 구문은 다음과 같습니다.

contain: layout|paint|size|style|'none'|'strict'|'content';

1. layout: 요소의 레이아웃이 다른 요소와 독립적인지 여부를 지정합니다. 레이아웃으로 설정하면 레이아웃 성능이 향상될 수 있습니다. 레이아웃 독립성을 달성하기 위해 포함 속성을 사용하는 샘플 코드는 다음과 같습니다.

<style>
    .container {
        contain: layout;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

2. paint: 요소 그리기가 다른 요소와 독립적인지 여부를 지정합니다. 페인트로 설정하면 그리기 성능이 향상될 수 있습니다. 그리기 독립성을 달성하기 위해 포함 속성을 사용하는 샘플 코드는 다음과 같습니다.

<style>
    .container {
        contain: paint;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

3. size: 요소의 크기가 다른 요소와 독립적인지 여부를 지정합니다. 크기로 설정하면 크기 계산 성능이 향상될 수 있습니다. 크기 독립성을 달성하기 위해 포함 속성을 사용하는 샘플 코드는 다음과 같습니다.

<style>
    .container {
        contain: size;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

4. style: 요소의 스타일이 다른 요소와 독립적인지 여부를 지정합니다. 스타일로 설정하면 스타일 계산 성능이 향상될 수 있습니다. 스타일 독립성을 달성하기 위해 포함 속성을 사용하는 샘플 코드는 다음과 같습니다.

<style>
    .container {
        contain: style;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

5. none: 포함 속성이 적용되지 않음을 나타냅니다. none을 사용한 샘플 코드는 다음과 같습니다.

<style>
    .container {
        contain: none;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

6. strict: 모든 포함 함수가 적용됨을 나타냅니다. strict를 사용한 샘플 코드는 다음과 같습니다.

<style>
    .container {
        contain: strict;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

7. content: 해당 요소의 콘텐츠가 다른 요소와 독립적인지 여부를 지정합니다. 콘텐츠로 설정하면 콘텐츠 렌더링 성능이 향상될 수 있습니다. 콘텐츠 독립성을 달성하기 위해 포함 속성을 사용하는 샘플 코드는 다음과 같습니다.

<style>
    .container {
        contain: content;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

요약하면 CSS에서 포함 속성의 사용 시나리오는 레이아웃, 그리기, 크기, 스타일 및 콘텐츠와 같은 측면에서 최적화될 수 있습니다. 포함 속성을 설정하면 특정 측면에서 요소를 다른 요소와 독립적으로 만들 수 있으므로 페이지의 성능과 효율성이 향상됩니다.

위 내용은 CSS에 포함된 구문 사용 시나리오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!