프런트엔드 프로젝트에 배치하는 여러 가지 방법

프론트엔드 프로젝트에서는 위치 지정 속성 position을 사용하여 위치 지정을 수행한다는 것을 알고 있는데, 여기에는 어떤 구체적인 속성 값이 있나요? 일반적인 위치 지정 방법은 무엇입니까? 오늘은 그 내용을 요약해 보겠습니다.

값 설명

absolute 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정되는 절대 위치 지정을 사용하여 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

fixed 브라우저 창을 기준으로 절대 위치에 있는 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

relative 일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다. 따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.

정적 기본값. 위치 지정이 없으면 요소는 일반적인 흐름으로 나타납니다(상단, 하단, 왼쪽, 오른쪽 또는 z-index 선언 무시).

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 초기 값이 표시됩니다.

오버플로는 우리가 자주 사용하는 것입니다. 요소의 크기가 고정되어 있지만 내용이 맞지 않으면 오버플로가 발생합니다. 오버플로 부분의 가시성, 보이지 않음(숨김), 스크롤 가시성(스크롤)을 제어합니다.

요소 가시성visibility: 표시/숨김/접기/상속, 초기 값이 표시됩니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

div 너비 적응형 만들기에 대한 튜토리얼

CSS를 사용하지 않고 마우스 오버 스타일을 변경하는 방법

HTML 웹 페이지를 최적화하는 방법

위 내용은 프런트엔드 프로젝트에 배치하는 여러 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!