CSS에서 포함 속성의 구문은 무엇입니까?

CSS의 포함 속성은 요소가 다른 요소를 포함해야 하는지 또는 다른 요소 내에 포함되어야 하는지를 지정하는 데 사용됩니다. 포함 속성을 설정하면 어떤 요소를 독립적으로 처리해야 하는지 브라우저에 알릴 수 있으므로 페이지의 렌더링 성능이 향상됩니다.

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

contain: layout [paint] [size] [style]

• layout: 요소를 다른 요소와 독립적으로 배치해야 하는지 여부를 나타냅니다. 선택 값은 none, strict, content입니다. none、strict和content。

  • none：表示元素不会影响其他元素的布局，也不会被其他元素影响。
  • strict：表示元素会影响其他元素的布局，但不会被其他元素影响。
  • content：表示元素只会被其直接父级元素影响，而不会影响其他元素。

• paint：表示元素是否应该独立于其他元素进行绘制。可选值有：none和contents。

  • none：表示元素自身不会进行绘制，不会产生可视效果。
  • contents：表示元素会进行绘制，会产生可视效果。

• size：表示元素是否应该独立于其他元素进行尺寸计算。可选值有：none、content和strict。

  • none：表示元素的尺寸计算不依赖于其内部内容。
  • content：表示元素的尺寸计算依赖于其内部内容的大小。
  • strict：表示元素的尺寸计算只依赖于其直接子元素的大小，与内部内容无关。

• style：表示元素是否应该独立于其他元素进行样式计算。可选值有：none和contents。

  • none：表示元素的样式计算不依赖于其内部内容和子元素。
  • contents：表示元素的样式计算依赖于其内部内容和子元素。

下面是一些具体的代码示例：

/* 设置元素在布局上独立于其他元素 */
.container {
  contain: layout;
}

/* 设置元素在绘制上独立于其他元素 */
.box {
  contain: paint;
}

/* 设置元素在尺寸计算上独立于其他元素 */
.img-container {
  contain: size;
}

/* 设置元素在样式计算上独立于其他元素 */
.card {
  contain: style;
}

以上示例中，.container类设置了元素独立于其他元素的布局，.box类设置了元素独立于其他元素的绘制，.img-container类设置了元素独立于其他元素的尺寸计算，.card

none: 요소가 다른 요소의 레이아웃에 영향을 주지 않으며 다른 요소의 영향도 받지 않음을 나타냅니다.

strict: 요소가 다른 요소의 레이아웃에 영향을 주지만 다른 요소의 영향을 받지 않음을 나타냅니다. 🎜content: 요소가 직접 상위 요소의 영향만 받고 다른 요소에는 영향을 미치지 않음을 나타냅니다. 🎜🎜paint: 요소를 다른 요소와 독립적으로 그려야 하는지 여부를 나타냅니다. 선택적 값은 none 및 contents입니다. 🎜🎜🎜none: 요소 자체가 그려지지 않으며 시각적 효과를 생성하지 않음을 나타냅니다. 🎜contents: 요소가 그려지고 시각적 효과를 생성함을 나타냅니다. 🎜🎜size: 요소의 크기를 다른 요소와 독립적으로 조정해야 하는지 여부를 나타냅니다. 선택적인 값은 none, content, strict입니다. 🎜🎜🎜none: 요소의 크기 계산이 내부 콘텐츠에 의존하지 않음을 나타냅니다. 🎜content: 요소의 크기 계산이 내부 콘텐츠의 크기에 따라 달라짐을 나타냅니다. 🎜strict: 요소의 크기 계산은 직계 하위 요소의 크기에만 의존하고 내부 콘텐츠와는 아무 관련이 없음을 나타냅니다. 🎜🎜style: 요소의 스타일을 다른 요소와 독립적으로 지정해야 하는지 여부를 나타냅니다. 선택적 값은 none 및 contents입니다. 🎜🎜🎜none: 요소의 스타일 계산이 내부 콘텐츠 및 하위 요소에 의존하지 않음을 나타냅니다. 🎜contents: 요소의 스타일 계산이 내부 콘텐츠와 하위 요소에 따라 달라짐을 나타냅니다. 🎜다음은 몇 가지 구체적인 코드 예입니다. 🎜rrreee🎜위 예에서 .container 클래스는 다른 클래스로부터 요소의 독립성을 설정합니다. 요소 레이아웃, .box 클래스는 다른 요소와 독립적으로 요소 그리기를 설정하고, .img-container 클래스는 다른 요소와 독립적으로 요소의 크기 계산을 설정합니다. code>.card 클래스는 다른 요소와 독립적으로 요소의 스타일 계산을 설정합니다. 🎜🎜contain 속성을 사용하면 페이지 렌더링 성능을 최적화하고, 불필요한 리플로우 및 다시 그리기 작업을 줄이고, 사용자 경험을 향상시킬 수 있습니다. 🎜

위 내용은 CSS에서 포함 속성의 구문은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!