CSS의 위치, 부동, 표시 속성과 세 가지 속성 간의 관계에 대한 심층적인 이해

이 글은 주로 CSS의 position, float, display 속성에 대해 다루고 있으며, position, float, display 속성 간의 관계도 참고하시면 도움이 될 것 같습니다.

position 속성:

position 속성은 요소의 위치 지정 방법을 나타냅니다. 4가지 가능한 값이 있습니다: 정적, 상대, 절대 또는 고정:

정적: 기본값, 요소는 문서 흐름에 나타나는 순서대로 렌더링됩니다.
절대: 절대 위치 지정, 요소는 첫 번째 위치에 있는 상위 요소를 기준으로 합니다( 비정적) 위치 지정
고정: 요소는 브라우저 창을 기준으로 위치가 지정됩니다.
상대: 요소는 일반 위치를 기준으로 위치가 지정됩니다. 따라서 "왼쪽:20"은 요소의 일반 위치를 기준으로 20만큼 이동한다는 의미입니다. 픽셀 단위로 왼쪽 거리로 이동합니다.

float 속성:

float 속성은 요소가 부동하는 방향을 정의합니다. 역사적으로 이 속성은 항상 이미지에 적용되어 텍스트가 이미지 주위를 둘러싸도록 했지만 CSS에서는 모든 요소가 부동될 수 있습니다. 부동 요소는 요소 유형에 관계없이 블록 수준 상자를 만듭니다.
대체되지 않은 부동 요소의 경우 명시적인 너비를 지정하세요. 그렇지 않으면 너비가 최대한 좁아집니다.
참고: 행에 부동 요소를 위한 공간이 거의 없으면 요소는 다음 행으로 이동하며 이 프로세스는 특정 행에 충분한 공간이 생길 때까지 계속됩니다.

없음: 기본값입니다. 요소는 부동되지 않으며 텍스트에 나타나는 위치에 나타납니다.
왼쪽: 요소가 왼쪽으로 떠있습니다.
오른쪽: 요소가 오른쪽에 떠 있습니다.

display 속성:

display 속성은 DOM 요소에서 사용하는 상자 모델(상자)을 지정합니다. 즉, 요소가 생성해야 하는 상자 유형입니다.

인라인: 기본값. 이 요소는 요소 앞이나 뒤에 줄 바꿈이 없는 인라인 요소로 표시됩니다.
없음: 이 요소는 표시되지 않습니다.
블록: 이 요소는 이 요소 앞뒤에 줄 바꿈이 있는 블록 수준 요소로 표시됩니다.
inline-block: 인라인 블록 요소. 이 값을 사용하면 요소가 블록 상자를 생성하고 교체된 요소와 유사하게 단일 인라인 상자로 흐르게 됩니다. Display 값이 inline-block인 요소는 내부적으로 블록박스 모델을 형성하며, 그 자체가 인라인 대체 요소와 같은 형태를 이룬다. 인라인 요소(예: 텍스트)를 사용하여 한 줄에 이 효과를 적용하면 페이지를 디자인할 때 여러 위치에서 편리함을 얻을 수 있습니다. 가장 일반적인 것은 인라인 요소처럼 중앙에 배치하거나 크기를 설정하는 경우입니다. 블록 요소와 마찬가지로 단일 메뉴가 있으며, 텍스트 들여쓰기를 통해 텍스트를 숨기고 배경 이미지를 표시할 수도 있습니다.
list-item: 이 요소는 목록으로 표시됩니다.
table: 이 요소는 블록으로 표시됩니다. 레벨 테이블(

CSS 박스 모델(Box Model) 모든 것이 상자입니다.

div, h1 또는 p 요소를 종종 a라고 합니다. 블록 수준 요소는 이러한 요소가 콘텐츠 블록, 즉 "블록 상자"로 표시됨을 의미합니다. 반면에 span 및 Strong과 같은 요소는 해당 콘텐츠가 한 줄에 표시되기 때문에 "인라인 요소"라고 합니다. , 즉 "인라인 상자"

상자 유형을 사용하여 생성을 변경할 수 있습니다. 이는 인라인 요소(예: 요소)가 블록 수준처럼 동작하도록 할 수 있음을 의미합니다. 요소에는 상자가 전혀 없습니다. 이 경우 상자와 모든 내용이 더 이상 표시되지 않으며 문서에서 공간을 차지하지 않습니다. level 요소는 명시적으로 정의되지 않은 경우에도 생성됩니다. 블록 수준 요소(예: div)의 시작 부분에 일부 텍스트를 추가하면 다음과 같이 정의되지 않은 경우에도 단락으로 처리됩니다. 단락:

<div> 
some text 
<p>Some more text.</p> 
</div>

이 경우 상자는 특별히 정의된 요소

Css 속성: 표시, 위치 및 부동 관계와 연결되어 있지 않기 때문에 이름 없는 블록 상자라고 합니다.

요소의 표시 속성이 없음으로 설정된 경우 요소에 해당하는 상자가 생성되지 않습니다. 이 경우 부동 및 위치는 무시됩니다.
그렇지 않은 경우(표시가 없음이 아님) 요소의 위치 속성이 있는 경우 절대 또는 고정(둘 다 절대 위치 지정)으로 설정된 경우, 이 경우 float는 무시되고(float의 계산된 값은 없음), 표시 속성의 값은 다음 표에 따라 자동으로 계산됩니다. 상자의 위치는 위쪽, 오른쪽, 아래쪽, 왼쪽 속성과 상자의 컨테이너에 따라 달라집니다.
그렇지 않으면(표시가 없음이 아니고 위치가 절대 또는 고정이 아님), float 값이 null이 아닌 경우(왼쪽이 왼쪽임) 또는 오른쪽), 상자는 부동 상태이고 표시 값은 다음 표에 따라 계산됩니다. 그렇지 않으면(표시가 없음이 아니고 위치가 절대 또는 고정이 아니며 부동이 없음) 요소가 루트 요소인 경우입니다. , 표시 값은 다음 표에 따라 계산됩니다. (이 경우에는 예외가 있습니다: CSS2.1에 정의되어 있으며, 표시의 지정된 값이 목록 항목인 경우 계산된 표시의 값은 블록 또는 목록 항목입니다)
그렇지 않은 경우(표시는 없음이 아니고 위치가 절대값이 아니고 고정됨, 부동 소수점이 없음, 루트 요소가 아님) 지정된 표시 속성 값에 따라 표시됩니다.

테이블 표시 속성 변환:

지정된 값 inline-table 테이블로 변환

지정된 값 인라인, table-row-group, table-column, table-column-group, table-header-group, table-footer- group, table-row, table-cell, table-caption, inline-block은 블록으로 변환됩니다
다른 지정된 값은 변경되지 않습니다.

위 내용은 CSS의 위치, 부동, 표시 속성과 세 가지 속성 간의 관계에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!