CSS를 배치하는 다양한 방법과 그 차이점

프론트 엔드 레이아웃을 할 때 위치 지정은 CSS에서 중요한 부분입니다. 위치 지정은 많은 값을 가지고 있습니다. 공통 속성은 다음과 같습니다.

값 설명

absolute 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정된 절대 위치 지정 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
fixed 브라우저 창을 기준으로 절대 위치에 있는 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
relative 일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다. 따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.
정적 기본값. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다.
inherit는 위치 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

우선 여기서는 표준 상자 모델을 사용하고 있으므로 누구나 분석할 때 상자 또는 프레임으로 생각해야 합니다. 먼저 첫 번째 기본 매개변수인 static에 대해 알아봅시다.

static: Static positioning은 position의 기본값으로 요소박스가 정상적으로 생성됩니다. 즉, positioning 없이 정상적으로 표시됩니다.
절대: 절대 위치
요소는 문서 흐름에서 제거되고 포함 블록을 기준으로 배치됩니다. 요소는 원래 공간에서 닫혀 있습니다. 원래 인라인 요소인지 블록 수준 요소인지에 관계없이 요소가 배치된 후에 블록 수준 상자가 생성됩니다.
여기서 컨테이닝 블록은 최신 위치 값이 정적이지 않은 조상 요소(블록 수준 또는 인라인)를 나타냅니다. 일반적으로 요소는 절대 위치 요소의 컨테이닝 블록으로 지정되며 해당 위치는 오프셋 없이 상대 위치로 설정됩니다.

fixed: 고정 위치 지정
요소는 텍스트 흐름에서 분리되고 일반 텍스트에서 제거되며 브라우저 창을 기준으로 위치가 지정되므로 문서가 스크롤될 때 움직이지 않습니다. 요소는 원래 공간에서 닫혀 있습니다. 원래 인라인 요소인지 블록 수준 요소인지에 관계없이 요소가 배치된 후에 블록 수준 상자가 생성됩니다. 절대 위치 지정과의 유일한 차이점은 포함 블록입니다. 포함 블록: 브라우저 창.

relative: 상대 위치 지정. 상대 위치 지정, 가장 일반적으로 사용되는 방법은 다음과 같습니다.
사용 방법 1: 요소는 원래 위치를 기준으로 특정 거리만큼 오프셋되지만 원래 공간은 그대로 유지되어 공백으로 나타납니다.
방법 2: 요소를 position:relative로 설정하여 요소의 하위 요소를 요소에 절대적으로 상대적으로 배치합니다.

절대/고정 및 부동 비교
동일: 요소는 텍스트 흐름에서 분리되고 일반 텍스트에서 삭제되지만 레이아웃 여부에 관계없이 여전히 블록 수준 상자가 생성됩니다. 블록 수준 요소인지 아닌지입니다.
차이점: float의 포함 블록은 가장 가까운 블록 수준 조상 요소입니다.

오프셋 속성 설정: 위쪽/오른쪽/아래/왼쪽, 초기 값은 자동입니다.
위치 위치 지정을 사용한 후에는 오프셋 속성을 사용하여 포함 블록을 기준으로 한 오프셋인 오프셋을 정의해야 합니다. 사용할 때 주의할 점은 오프셋을 정의하는 요소는 위치 값이 고정적이지 않은 요소여야 한다는 점입니다.
때로는 너비와 높이도 정의해야 하지만 4개의 ​​오프셋 속성이 실제로 요소의 크기를 정의하기 때문에 오프셋 속성의 정의와 충돌할 수 있습니다. 이때, width 및 left 속성에 따라 왼쪽과 오른쪽이 정의되고, top 및 height 속성에 따라 위쪽과 아래쪽이 정의됩니다.

CSS의 또 다른 속성입니다. 그런 다음 콘텐츠 오버플로: overflow
일반적으로 콘텐츠 오버플로 속성에는 다음과 같은 값이 있습니다.
overflow: visible/hidden/scroll /auto/ 상속
overflow 초기 값이 표시됩니다.
오버플로는 우리가 자주 사용하는 것입니다. 요소의 크기가 고정되어 있지만 내용이 맞지 않으면 오버플로가 발생합니다. 오버플로 부분의 가시성, 보이지 않음(숨김), 스크롤 가시성(스크롤)을 제어합니다.
요소 가시성 가시성: 표시/숨김/접기/상속, 초기 값이 표시됩니다.

위 내용은 CSS를 배치하는 다양한 방법과 그 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!