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: 요소가 다른 요소의 레이아웃에 영향을 주지 않으며 다른 요소의 영향도 받지 않음을 나타냅니다.

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