CSS 표시 사용 방법: 내용?

display: content는 상대적으로 생소한 속성입니다. display는 기본적으로 가장 일반적인 CSS 속성이지만, content의 값은 거의 사용되지 않습니다. 하지만 2016년부터 Firefox에서 지원되었습니다.

이 글에서는 이 흥미로운 속성 값에 대해 자세히 살펴보겠습니다.

기본 사용법

W3C의 디스플레이 정의에 따르면: 콘텐츠.

요소 자체는 상자를 생성하지 않지만 해당 하위 요소와 의사 요소는 여전히 상자를 생성하고 텍스트는 정상적으로 실행됩니다. 상자 생성 및 레이아웃을 위해 요소는 다음에서 대체된 것처럼 처리되어야 합니다. 콘텐츠별 요소 트리(소스 문서 하위 요소와 일반적으로 요소의 하위 요소 앞/뒤에 생성되는 ::before 및 ::after 의사 요소와 같은 의사 요소 포함).

간단한 번역 즉, 이 속성 값이 설정된 요소는 자체 상자를 생성하지 않지만 하위 요소의 일반적인 표시를 유지합니다.

간단한 예를 살펴보세요. 다음과 같은 간단한 3계층 구조가 있습니다.

<div class="container">
    <div class="wrap">
        <div class="inner"></div>
    </div>
</div>

간단한 CSS는 다음과 같습니다.

.container {
    width: 200px;
    height: 200px;
    background: #bbb;
}
.wrap {
    border: 2px solid red;
    padding: 20px;
    box-sizing: border-box;
}
.inner {
    border: 2px solid green;
    padding: 20px;
    box-sizing: border-box;
}

성능은 다음과 같습니다.

이것은 매우 이해하기 쉽지만, display:contents를 추가하면 중간 레이어에 있는 컨테이너, 효과를 살펴보겠습니다.

<div class="container">
    <div class="wrap" style="display: contents">
        <div class="inner"></div>
    </div>
</div>

중간 레이어 테두리의 빨간색 테두리가 없는 것을 볼 수 있습니다. 2px 단색 빨간색, 전체 .wrap div가 존재하지 않는 것처럼 보이지만 하위 요소 정상적으로 렌더링됩니다.

중요한 점은 display:contents가 설정된 요소 자체는 렌더링되지 않지만 해당 하위 요소는 정상적으로 렌더링될 수 있다는 것입니다.

이 속성에 매우 적합한 사용 포인트는 무엇인지 생각해 왔습니다.

요약하자면 이 속성은 래퍼 역할을 하는 요소에 적합합니다. 이러한 요소 자체는 효과가 없으며 일부 레이아웃 시나리오에서는 무시될 수 있습니다.

의미 없는 포장 상자 역할을 합니다

최근 React와 Vue를 작성할 때 이 속성이 JSX를 작성할 때 매우 좋은 역할을 할 수 있다는 것을 알았으며 이 속성의 위치와도 매우 일치합니다. 그 자체.

React와 RN을 작성할 때 템플릿을 출력해야 하는 경우가 종종 있습니다.

return (
    <div class="wrap">
        <h2>Title</h2>
        <div>...</div>
    </div>
)

.wrap div 내의 콘텐츠를 출력하고 싶지만 프레임워크 요구 사항으로 인해 출력 JSX 템플릿이 상위 요소 아래에 포함되어야 하므로 최후의 수단으로 래핑을 위해 .wrap을 추가해야 합니다. 하지만 이 .wrap 자체는 Any 스타일이 아닙니다.

출력 요소를 다른 디스플레이(flex, 디스플레이: 그리드 컨테이너) 아래에 배치하려면 의미 없는 .wrap 레이어를 추가한 후 전체 레이아웃을 다시 조정해야 하는데 이는 번거로운 작업입니다.

한 가지 방법은 페이지에 추가 노드를 삽입하지 않는 프레임워크에서 제공하는 컨테이너 를 사용하는 것입니다.

Vue에서 비슷한 것은