기존 웹 페이지 레이아웃의 세 가지 방법

웹 레이아웃의 본질 ---- CSS를 사용하여 상자를 배치합니다. 적절한 위치에 상자를 배치합니다.CSS는 세 가지 전통적인 레이아웃 방식을 제공합니다:

1. 일반 흐름

2. 플로트

3. 포지셔닝

표준 흐름

표준 흐름이란 레이블이 잘 정의된 기본 방식으로 정렬되는 것을 의미합니다.

1. 블록 레벨 요소는 위에서 아래로 한 줄을 차지합니다.

공통 요소: div, hr, p, h1~h6, ul, dl, form, table

2. 인라인 요소는 왼쪽에서 오른쪽 순서대로 부모 요소의 가장자리에 닿는 순서에 따라 자동으로 줄 바꿈됩니다.

공통 요소: 스팬, a, i, em 등

플로팅이 필요한 이유

레이아웃 효과가 많고 표준 플로우로는 완료할 방법이 없는 경우 플로트를 사용하여 레이아웃을 완료할 수 있습니다. 플로트는 요소 레이블의 기본 배열을 변경할 수 있기 때문입니다.

플로트의 가장 일반적인 응용 분야는 여러 블록 수준 요소를 한 줄에 표시할 수 있는 것입니다.

웹 페이지 레이아웃의 첫 번째 규칙: 세로로 정렬된 여러 블록 수준 요소에는 표준 흐름을, 가로로 정렬된 여러 블록 수준 요소에는 플로트를 찾습니다.

플로팅이란 무엇인가요?

플로트 속성은 왼쪽 또는 오른쪽 가장자리가 포함된 블록 또는 다른 플로팅 박스의 가장자리에 닿을 때까지 한쪽으로 이동하여 플로팅 박스를 만드는 데 사용됩니다.

문법:

선택기{ float: 속성 값;}

플로팅 특성

플로트 세트가 있는 요소의 가장 중요한 특성입니다:

1. 표준 일반 스트림의 제어를 벗어나 지정된 위치로 이동합니다.

2. 플로팅 박스가 더 이상 원래 위치를 유지하지 않습니다.

3. 여러 개의 상자를 플로팅으로 설정하면 속성 값에 따라 상자가 일렬로 표시되고 상단에 정렬됩니다.

참고: 부동 요소는 서로 옆에 배치되므로 부모 너비가 부동 상자에 맞지 않는 경우 여분의 상자가 별도의 줄에 정렬됩니다.

4. 플로팅 요소는 인라인 블록 요소 특성을 갖습니다.

모든 요소를 플로팅할 수 있습니다. 요소의 원래 패턴이 무엇이든 플로트를 추가하면 인라인 블록 요소와 유사한 특성을 갖게 됩니다.

• 블록 수준 요소에 너비가 설정되어 있지 않은 경우 기본 너비는 부모와 동일하지만 부동 소수점이 추가되면 콘텐츠에 따라 크기가 결정됩니다.
• 플로팅 박스 중간에 간격이 없으며 서로 바로 옆에 있습니다.
• 인라인 요소도 마찬가지입니다.

부동 요소는 종종 표준 흐름 부모와 쌍을 이룹니다.

플로팅 요소의 위치를 제한하기 위해 웹 페이지 레이아웃은 일반적으로 먼저 상위 요소의 표준 흐름을 사용하여 상단 및 하단 위치를 정렬 한 다음 내부 하위 요소를 사용하여 왼쪽 및 오른쪽 위치의 플로팅 배열, 첫 번째 지침의 복합 웹 페이지 레이아웃을 취하는 전략을 채택합니다.

플로팅 레이아웃 주의 사항

1. 플로트 및 표준 스트림에 대한 부모 상자 페어링.

먼저 표준 플로우를 사용하여 부모 요소를 위아래로 정렬한 다음 내부 자식 요소를 좌우로 띄웁니다.

2. 하나의 요소가 플로팅되면 이론적으로 나머지 형제 요소도 플로팅되어야 합니다.

상자 안에는 여러 개의 하위 상자가 있으며, 그 중 하나가 플로팅되면 나머지 형제 상자도 플로팅되어 문제가 발생하지 않도록 해야 합니다. 플로팅 박스는 플로팅 박스 뒤에 있는 표준 흐름에만 영향을 미치며, 그 앞의 표준 흐름에는 영향을 미치지 않습니다.