>  기사  >  웹 프론트엔드  >  CSS에 포함된 구문 사용 시나리오

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

WBOY
WBOY원래의
2024-02-21 14:00:061323검색

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>
  1. paint: 요소 그리기가 다른 요소와 독립적인지 여부를 지정합니다. 페인트로 설정하면 그리기 성능이 향상될 수 있습니다. 그리기 독립성을 달성하기 위해 포함 속성을 사용하는 샘플 코드는 다음과 같습니다.
<style>
    .container {
        contain: paint;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
  1. size: 요소의 크기가 다른 요소와 독립적인지 여부를 지정합니다. 크기로 설정하면 크기 계산 성능이 향상될 수 있습니다. 크기 독립성을 달성하기 위해 포함 속성을 사용하는 샘플 코드는 다음과 같습니다.
<style>
    .container {
        contain: size;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
  1. style: 요소의 스타일이 다른 요소와 독립적인지 여부를 지정합니다. 스타일로 설정하면 스타일 계산 성능이 향상될 수 있습니다. 스타일 독립성을 달성하기 위해 포함 속성을 사용하는 샘플 코드는 다음과 같습니다.
<style>
    .container {
        contain: style;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
  1. none: 포함 속성이 적용되지 않음을 나타냅니다. none을 사용한 샘플 코드는 다음과 같습니다.
<style>
    .container {
        contain: none;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
  1. strict: 모든 포함 함수가 적용됨을 나타냅니다. strict를 사용한 샘플 코드는 다음과 같습니다.
<style>
    .container {
        contain: strict;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
  1. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.