CSS에서 표시/부동/위치 속성 값의 상호 영향에 대한 자세한 설명

레이아웃 및 상자 생성과 관련된 속성에는 'display', 'position', 'float' 세 가지가 있으며, 이들은 다음과 같이 상호 작용합니다.

'display' 값이 'none'이면 'position'과 'float'는 아무런 효과가 없습니다. 이 경우 상자가 생성되지 않습니다.

그렇지 않으면 'position' 값이 'absolute' 또는 'fixed'인 경우 상자는 절대적 위치에 있으며 'float'의 계산된 값은 'none', 'display' 값은 아래와 같이 설정됩니다. 상자의 위치는 '상단', '오른쪽', '하단' 및 '왼쪽' 속성과 해당 상자를 포함하는 블록에 의해 결정됩니다.

그렇지 않으면 'float' 값이 'none'이 아니면 상자가 float되고 'display' 값이 아래와 같이 설정됩니다.

그렇지 않으면 요소가 루트 요소인 경우 'display' 값은 다음과 같이 설정됩니다(list-item으로 지정된 값은 제외). CSS2.1에서는 정의되지 않은 'block' 또는 'list-item'으로 계산됩니다. )

그렇지 않은 경우 'display' 값 속성은 값을 지정하는 것입니다.

여기서 inline-flex와 flex는 CSS3 탄력적 레이아웃 모듈에 의해 도입된 새로운 속성 값입니다.

요약하면 절대 위치 지정, 플렉스 레이아웃, 그리드 레이아웃 컨테이너의 콘텐츠 항목 표시 속성이 차단됩니다.

위 글은 CSS에서 디스플레이/플로트/위치 속성 값의 상호 영향에 대해 간략하게 설명합니다. 이 내용은 모두 편집자가 공유한 내용이므로 참고가 되기를 바랍니다. 또한 모든 사람들이 PHP 중국어 웹사이트를 지원하기를 바랍니다.

CSS에서 표시/부동/위치 속성 값의 상호 영향에 대한 자세한 설명은 PHP 중국어 웹사이트의 관련 기사를 주목해주세요!