CSS 위치 지정을 이해하는 방법은 무엇입니까?

CSS 위치 지정 속성을 사용하면 요소의 위치를 ​​지정할 수 있습니다.

CSS 위치 지정 및 부동

CSS는 위치 지정 및 부동을 위한 몇 가지 속성을 제공합니다. 이러한 속성을 사용하면 열 레이아웃을 만들고 레이아웃의 한 부분을 다른 부분과 겹치며 종종 필요한 작업을 수행할 수도 있습니다. 여러 해 동안 양식을 통해서만 수행할 수 있는 작업입니다. (추천 학습: CSS 입문 튜토리얼 )

위치 지정의 기본 아이디어는 간단합니다. 이를 통해 요소 상자가 일반 위치를 기준으로 표시되어야 하는 위치를 정의하거나 상위 요소, 다른 요소 또는 브라우저 창 자체의 위치도 마찬가지입니다.

분명히 이 기능은 매우 강력하고 놀랍습니다. 사용자 에이전트가 다른 측면보다 CSS2에서 위치 지정을 훨씬 더 잘 지원한다는 사실은 놀라운 일이 아닙니다.

반면에 Floats는 CSS1에서 처음 제안되었으며 웹 초기에 Netscape에서 추가된 기능을 기반으로 했습니다. 플로팅은 정확한 위치 지정은 아니지만 확실히 일반적인 흐름 레이아웃도 아닙니다. float의 의미는 이후 장에서 명확히 설명하겠습니다.

모든 것은 상자입니다

div, h1 또는 p 요소를 종종 블록 수준 요소라고 합니다. 즉, 이러한 요소는 콘텐츠 블록, 즉 "블록 상자"로 나타납니다. 대조적으로, 스팬(span) 및 스트롱(strong)과 같은 요소는 해당 콘텐츠가 "인라인 상자"라는 한 줄 안에 나타나기 때문에 "인라인 요소"라고 합니다.

표시 속성을 사용하여 생성된 상자 유형을 변경할 수 있습니다. 즉, 표시 속성을 block으로 설정하여 인라인 요소(예: 요소)가 블록 수준 요소처럼 동작하도록 할 수 있습니다.

생성된 요소에 프레임이 전혀 없도록 표시를 없음으로 설정할 수도 있습니다. 이렇게 하면 상자와 그 안에 들어 있는 모든 내용이 더 이상 표시되지 않으며 문서에서 공간을 차지하지 않습니다.

그러나 어떤 경우에는 명시적인 정의 없이도 블록 수준 요소가 생성됩니다. 이는 블록 수준 요소(예: div)의 시작 부분에 일부 텍스트를 추가할 때 발생합니다. 텍스트가 단락으로 정의되지 않더라도 하나로 처리됩니다.

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

이 경우 상자는 특별히 정의된 요소와 연결되지 않기 때문에 이름 없는 블록 상자라고 합니다.

블록 수준 요소의 텍스트 줄에서도 비슷한 상황이 발생합니다. 세 줄의 텍스트가 포함된 단락이 있다고 가정해 보겠습니다. 각 텍스트 줄은 이름이 지정되지 않은 상자를 형성합니다. 스타일을 적용할 장소가 없기 때문에 이름 없는 블록이나 라인 상자에 스타일을 직접 적용할 수 없습니다(라인 상자와 인라인 상자는 서로 다른 개념입니다). 하지만 화면에 보이는 모든 것이 일종의 상자를 형성한다는 점을 이해하면 도움이 됩니다.

CSS 위치 지정 메커니즘

CSS에는 일반 흐름, 부동 및 절대 위치 지정의 세 가지 기본 위치 지정 메커니즘이 있습니다.

특별히 지정하지 않는 한 모든 상자는 일반 흐름으로 배치됩니다. 즉, 일반 흐름에서 요소의 위치는 (X)HTML의 요소 위치에 따라 결정됩니다.

블록 수준 상자는 위에서 아래로 하나씩 배열되며, 상자 사이의 세로 거리는 상자의 세로 여백을 기준으로 계산됩니다.

인라인 상자는 가로로 일렬로 배열됩니다. 간격은 수평 패딩, 테두리 및 여백을 사용하여 조정할 수 있습니다. 그러나 수직 패딩, 테두리 및 여백은 인라인 상자의 높이에 영향을 주지 않습니다. 라인으로 형성된 수평 상자를 라인 상자라고 합니다. 라인 상자의 높이는 항상 포함된 모든 인라인 상자를 수용할 수 있을 만큼 충분히 높습니다. 그러나 행 높이를 설정하면 이 상자의 높이가 늘어날 수 있습니다.

위 내용은 CSS 위치 지정을 이해하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!