완전히 새로운 디스플레이 속성.

Chrome 115부터 CSS 표시 속성에 여러 값이 있습니다. 디스플레이: 플렉스는 디스플레이: 블록 플렉스가 되고 디스플레이: 블록은 디스플레이: 블록 흐름이 됩니다. 여러분이 알고 있는 단일 값은 이제 레거시로 간주되지만 이전 버전과의 호환성을 위해 브라우저에 보관됩니다.

왜 기한이 오래 지났나요?

간단히 말하면, 박스 모델과 같은 것들을 설명하는 방법이 바뀌었습니다. 사양은 여전히 CR 스냅샷입니다. 즉, W3C는 표준을 완성하기 위해 구현자의 경험을 수집합니다. 따라서 일부 내용은 여전히 변경될 수 있습니다.

재작업에서는 디스플레이 유형을 외부 디스플레이 유형과 내부 디스플레이 유형의 두 부분으로 나눕니다.

외부 디스플레이 유형은 주요 상자 자체가 흐름 레이아웃에 참여하는 방식을 나타냅니다.

내부 디스플레이 유형은 하위 상자가 배치되는 방식을 결정합니다(교체된 요소를 제외하면 좀 더 복잡합니다).

따라서 display: flex는 display: block flex가 됩니다. 즉, 외부 디스플레이 유형은 블록이지만(외부에서는 블록 요소처럼 동작함) 해당 하위 요소는 flex 레이아웃에 따라 렌더링됩니다.

이전과 동일한 동작이지만 이번 변경으로 자식 요소와 주변 요소에 대한 표시 속성의 영향에 대해 이야기할 수 있습니다. 제 생각에는 이 정신 모델을 사용하면 보다 예측 가능한 레이아웃을 더 쉽게 만들 수 있고 다양한 레이아웃 모드와 그 효과를 더 쉽게 설명할 수 있습니다.

최신 코스나 튜토리얼에서는 박스 모델에 대한 좋은 설명이 여백, 테두리, 패딩, 너비, 높이뿐만 아니라 상자 크기 및 디스플레이 속성까지 포괄해야 합니다.

표시 속성의 유효한 값은 무엇입니까?

이미 언급했듯이 일부 오래된 부동산은 이제 유산이 되었습니다. 유효한 모든 속성은 다음과 같습니다.

다중 값 구문 표시의 경우: 외부 유형 내부 유형 유효한 외부 유형은block,inline및run-in입니다. 유효한 내부 디스플레이 유형은flow,flow-root,table,flex,grid및ruby입니다.

유효한 단일 값도 있습니다:list-item,contents및none.

또한 CSS에는 유효한 상태로 유지되는 일부 내부 표시 값이 있습니다. 이 값은 테이블 또는 루비 디스플레이 유형을 사용할 때 계산됩니다.

다음 조합은 이제 레거시입니다:inline-block,inline-table,inline-flex및inline-grid. 이는 해당하는 다중 값으로 대체될 수 있습니다(예: display: inline flex.

).

다중 값은 최신 버전의 최신 브라우저에서 지원됩니다: https://caniuse.com/mdn-css_properties_display_multi-keyword_values

디스플레이 속성의 다중 키워드 값에 Caniuse.

그게 다입니다!

읽어주셔서 정말 감사합니다!

위 내용은 완전히 새로운 디스플레이 속성.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!