CSS 부동, 위치 지정 및 상위 컨테이너 축소 문제

어떻게 표현해야 할까요? 프론트엔드를 접한 지 3개월이 지났는데, 며칠 전 IFE2017에 참가한 지금도 제 수준은 평균 수준입니다. 부동, 위치 지정에 대한 나의 이해와 열 레이아웃 및 상위 컨테이너 축소 문제에 대한 몇 가지 생각을 요약합니다.

우선 CSS 레이아웃의 기본은 플로팅과 포지셔닝을 통해 각 상자 모델을 픽셀 수준까지 정확하게 제어할 수 있다는 점에서 그 중요성을 알 수 있습니다.

먼저 플로팅에 대해 이야기해 보겠습니다.

HTML의 문서 개체 모델에서는 유동적 레이아웃이 채택됩니다. 즉, 블록 수준 요소가 단독 라인에 있고 블록 수준 요소를 나란히 정렬하려면 두 가지 주요 방법이 있습니다. 하나는 CSS에서 블록 수준 요소 표시를 인라인 블록으로 설정하는 것입니다. 그러나 이 방법을 사용하는 것은 적합하지 않은 경우가 많습니다. 우리는 부동 방법을 더 자주 사용하게 될 것입니다.

Float에는 두 가지 주요 유형이 있습니다. float: left; float: right; 부동은 블록 수준 요소를 표준 문서 흐름에서 벗어나게 만들 수 있습니다. 정의된 방향이 차단되거나 상위 컨테이너 경계에 닿을 때까지. 줄의 남은 너비가 충분하지 않으면 부동 상자가 다음 줄로 이동합니다. 플로팅은 페이지 레이아웃 구현을 위한 솔루션을 제공합니다.

그러나 무시할 수 없는 것은 때때로 간단한 플로팅이 인터페이스 레이아웃에 대한 요구 사항을 충족할 수 없다는 것입니다. 이때 포지셔닝의 중요성이 반영되는데, 포지셔닝은 상대(relative positioning), 절대(absolute positioning), 고정(fixed positioning), 정적(static)의 4가지 유형으로 나눌 수 있습니다. 위치 지정 속성을 요소에 적용하지 않으면 정적과 동일합니다.

그럼 상대 위치를 어떻게 이해해야 할까요? 상대 위치 지정이 적용된 요소(박스 모델)는 표준 문서 흐름을 벗어나지 않으며, 요소(박스 모델)의 미세 조정을 위해 상단, 왼쪽, 오른쪽, 하단 값을 설정할 수 있습니다. Top은 요소가 원래 위치를 기준으로 아래쪽으로 이동한다는 것을 의미하고(음수 값을 설정할 수 있으며 이는 Bottom을 양수로 설정하는 것과 동일함) 왼쪽은 요소가 원래 위치로 이동한다는 것을 의미합니다. 원래 위치에 비해 오른쪽입니다. 마찬가지로 오른쪽은 왼쪽으로 이동하고 아래쪽은 위로 이동합니다.

절대 위치 지정: 절대 위치 지정이 적용된 요소는 마치 존재하지 않았던 것처럼 문서 흐름에서 분리됩니다. 이때 해당 위치 지정은 상대 위치 지정이 적용된 상위 요소를 기준으로 합니다. 또한 매우 중요한 기능도 있습니다. 설정된 변위 값에 따라 "교차"된다는 것은 무엇을 의미합니까? 즉, 위쪽, 왼쪽, 오른쪽 및 아래쪽 설정은 상위 요소(상자)의 경계를 기준으로 합니다. 변위 방향이 설정된 경우 요소(상자)는 먼저 해당 방향으로 경계로 이동한 다음 경계를 기준으로 이동합니다.

고정 위치 지정: 고정 위치 지정도 표준 문서 흐름과 분리되어 있지만 브라우저 창을 기준으로 하며 스크롤 막대나 인터페이스의 움직임에 따라 변경되지 않습니다. 위쪽, 왼쪽으로 설정할 수도 있습니다. , 오른쪽, 아래쪽 값.

컬럼 레이아웃은 개인적으로 다음과 같은 방법을 사용합니다.

1. 레이아웃이 2개의 컬럼으로 나누어져 있는 경우 2개의 박스에 동시에 float를 적용하여 레이아웃을 할 수 있습니다. . 왼쪽 및 오른쪽 상자의 너비 또는 너비 비율을 설정할 수 있습니다.

2. 또한 두 개의 열로 배치됩니다. 왼쪽 상자에 왼쪽 부동 레이아웃을 적용하거나 오른쪽 상자에 위치 지정을 적용하거나 여백 값을 위치로 설정할 수도 있습니다.

3. 3열 레이아웃의 경우 상자를 왼쪽과 오른쪽에 띄우고 가운데 요소(상자)의 왼쪽과 오른쪽 여백을 설정하는 방법을 사용하는 것이 가장 좋습니다. ) 포지셔닝을 달성합니다.

1. 상위 컨테이너의 높이를 설정합니다.

2. 상위 컨테이너를 설정합니다. 오버플로: 숨김 또는 오버플로: 자동;

overflow:hidden;
overflow:auto;

3. 상위 요소를 부동 소수점으로 설정합니다(권장하지 않음)

4. 빈 요소를 상위 요소로 설정합니다(clearfix: 둘 다).

5. 상위 요소에 다음 스타일을 적용합니다.

.clearfix:before,
.clearfix:after
{
    content:"";
    display:table;
}
.clearfix:after
{
    clear:both;
}

요약하자면, 웹 페이지의 요소 레이아웃에서는 플로팅과 위치 지정을 함께 사용해야 하는 경우가 많습니다. 우리는 필요한 효과를 얻습니다.

위 내용은 이 기간 동안 CSS 포지셔닝 및 플로팅에 대한 저의 소소한 경험입니다. 오류가 있을 수 있으니 지적해 주시면 함께 발전할 수 있기를 바랍니다. 요약하자면, 나는 큰 사람들의 문서를 많이 읽었기 때문에 그들의 의견을 많이 빌리고, 내 자신의 이해를 공유하는 동시에 관련된 지식에 대한 이해를 깊게 했습니다. 모두가 최전선에서 함께 노력하고 날마다 발전하기를 바랍니다!

더 많은 CSS 부동, 위치 지정 및 상위 컨테이너 축소 문제에 대해서는 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!