CSS에서 위치 지정에 ID를 사용하는 방법

ID 선택기는 특정 ID로 표시된 HTML 요소에 대해 특정 스타일을 지정할 수 있습니다.

id 선택자는 "#"으로 정의됩니다. 아래 두 개의 ID 선택기의 경우 첫 번째 선택기는 요소의 색상을 빨간색으로 정의할 수 있고 두 번째 선택기는 요소의 색상을 녹색으로 정의할 수 있습니다.

#red {color:red;}
#green {color:green;}

다음 HTML 코드에서 id 속성은 빨간색의 p입니다. 요소는 빨간색으로 나타나고, id 속성이 녹색인 p 요소는 녹색으로 나타납니다.

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

참고: id 속성은 HTML 문서당 한 번만 나타날 수 있습니다.

CSS는 이러한 속성을 사용하여 열 레이아웃을 만들고 레이아웃의 한 부분을 다른 부분과 겹치게 할 수 있습니다. 또한 수년에 걸쳐 일반적으로 여러 양식을 사용해야 했던 작업을 수행할 수 있습니다.

위치 지정의 기본 아이디어는 간단합니다. 이를 통해 요소의 상자가 일반 위치를 기준으로 표시되어야 하는 위치를 정의하거나 상위 요소, 다른 요소 또는 브라우저 창 자체를 기준으로 표시할 수 있습니다. . 분명히 이 기능은 매우 강력하고 놀랍습니다. 사용자 에이전트가 다른 측면보다 CSS2에서 위치 지정을 훨씬 더 잘 지원한다는 사실은 놀라운 일이 아닙니다.

CSS 위치 지정 메커니즘

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

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

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

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

CSS 위치 속성

위치 속성을 사용하면 요소 상자 방식에 영향을 미치는 4가지 다른 위치 지정 유형 중에서 선택할 수 있습니다. 생성됩니다.

위치 속성 값의 의미:

static

요소 상자가 정상적으로 생성됩니다. 블록 수준 요소는 문서 흐름의 일부로 직사각형 상자를 만드는 반면, 인라인 요소는 상위 요소 내에 배치되는 하나 이상의 선 상자를 만듭니다.

relative

요소 상자는 특정 거리만큼 오프셋됩니다. 요소는 위치가 지정되지 않은 모양과 원래 차지했던 공간을 유지합니다.

absolute

요소 상자가 문서 흐름에서 완전히 제거되고 포함 블록을 기준으로 배치됩니다. 포함 블록은 문서의 다른 요소일 수도 있고 초기 포함 블록일 수도 있습니다. 일반적인 문서 흐름에서 해당 요소가 이전에 차지했던 공간은 해당 요소가 존재하지 않는 것처럼 닫힙니다. 요소는 원래 일반 흐름에서 생성된 상자 유형에 관계없이 위치 지정 후 블록 수준 상자를 생성합니다.

fixed

요소 상자는 위치를 절대값으로 설정하는 것처럼 동작하지만 포함 블록은 창 자체입니다.

팁: 요소의 위치는 일반 흐름의 위치에 상대적이므로 상대 위치 지정은 실제로 일반 흐름 위치 지정 모델의 일부로 간주됩니다.

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