웹페이지 레이아웃 및 플로팅

이번에는 웹페이지 레이아웃 방법과 플로팅에 대해 소개해드릴 예정이며, 웹페이지 레이아웃 방법과 플로팅에 대한 주의사항은 무엇인지 살펴보겠습니다.

1. 웹 페이지의 레이아웃 방법

1. 웹 페이지의 레이아웃 방법은 무엇입니까?

웹 페이지의 레이아웃 방법은 실제로 브라우저가 웹 페이지의 요소를 레이아웃하는 방법을 나타냅니다. 표준 흐름, 부동 흐름, 위치 지정 흐름

1. 표준 흐름(문서 흐름/일반 흐름) 조판 방법

1.1 실제로 브라우저의 기본 조판 방법은 표준 흐름의 조판 방법입니다

1.2 요소가 나누어집니다. CSS의 세 가지 범주, 즉 블록 수준 요소/인라인 요소/인라인 블록 수준 요소

1.3 표준 흐름에는 두 가지 조판 방법이 있습니다. 하나는 세로 조판이고 다른 하나는 가로 조판입니다.
세로 조판, 요소가 다음과 같은 경우 블록 수준 요소이면 세로로 조판됩니다
가로 조판, 요소가 인라인 요소/인라인 블록 수준 요소인 경우 가로로 조판됩니다

2. 플로팅 흐름 조판 방법

2.1 플로팅 흐름은 a입니다. "표준 대열에서 부분 분리된" 조판 방법

2.2 부동 흐름만 조판 방법 중 하나는 가로 조판입니다. 상위 요소를 기준으로 요소를 왼쪽 정렬 또는 오른쪽 정렬로만 설정할 수 있습니다.

참고:

1. 플로팅 흐름에는 중심 정렬이 없습니다. 즉, 중심 값이 없습니다
2. 플로팅 흐름에서는 사용할 수 없습니다margin: 0 자동(유효하지 않음)

특징:

1. 플로우는 블록수준 요소/인라인 요소/인라인 블록수준 요소를 구분하지 않습니다
레벨 요소/인라인 요소/인라인 블록수준 요소는 모두 가로로 입력할 수 있습니다
2. -레벨 요소/인라인 요소/인라인 블록 레벨 요소, 너비와 높이를 설정할 수 있습니다
3. 요약하면 플로팅 흐름의 요소는 표준 흐름의 인라인 블록 수준 요소와 매우 유사합니다

3. flow 조판 방법

2. 부동 요소의 비표준화

1. 부동 요소의 비표준화란?

비표준화: 표준 Stream에서 벗어남
요소가 부동되면 표준에서 삭제된 것처럼 보입니다 이것은 플로팅 요소의 비표준화입니다.

2. 플로팅 요소가 비표준화되면 어떤 영향을 미치나요?

이전 요소가 플로팅되고 다음 요소가 플로팅되지 않으면 이전 요소가 다음 요소를 덮습니다. 이번에는;

3.플로팅 요소 정렬 규칙

플로팅 요소 정렬 규칙:

1 같은 방향으로 플로팅 요소, 먼저 뜨는 요소가 앞에 표시되고 나중에 뜨는 요소가 표시됩니다. the back

2 다른 방향의 플로팅 요소, 왼쪽 플로팅은 왼쪽 플로팅을 찾고, 오른쪽 플로팅은 오른쪽 플로팅을 찾습니다.

3 플로팅 요소는 플로팅합니다. 후속 위치는 이전 표준 흐름에서 플로팅 요소의 위치에 따라 결정됩니다. 플로팅(플로팅 전 표준 흐름의 첫 번째 줄에 요소가 있으면 플로팅 후 첫 번째 줄에 표시됩니다. 요소가 플로팅 전 표준 흐름의 첫 번째 줄에 있으면 두 번째 줄에 표시됩니다. 플로팅 후 두 번째 줄에 표시됨)

4. 플로팅 요소 고착 현상

플로팅 요소 고착 현상이 무엇인가요?

1. 부모 요소의 너비가 모든 플로팅 요소를 표시할 수 있다면 플로팅 요소는

2. 상위 요소의 너비가 모든 플로팅 요소를 표시할 수 없는 경우 마지막 요소부터 앞으로 붙여넣습니다.
3 붙여넣은 후 이전 플로팅 요소를 모두 표시할 수 없는 경우 결국에는 표시됩니다. 상위 요소의 왼쪽 또는 오른쪽

5. 플로팅 요소의 글꼴 크기 현상

플로팅 요소의 글꼴 크기 현상은 무엇인가요?

플로팅 요소는 플로팅이 아닌 요소의 텍스트를 가리지 않습니다. , 플로팅되지 않은 텍스트는 자동으로 플로팅됩니다. 이것은 일반적으로 혼합 그래픽과 텍스트에 사용되는 플로팅 요소의 글꼴 크기 현상입니다!

플로팅 요소의 글꼴 크기 현상

표준 흐름 및 엔터프라이즈 개발에서 플로팅 흐름을 사용하는 경우?

1. 엔터프라이즈 개발에서 언제 표준 흐름을 사용하고 언제 플로팅 흐름을 사용합니까?

표준 흐름은 수직 방향으로 사용하고 플로팅 흐름은 수평 방향으로 사용합니다

2. 매우 복잡한 인터페이스로 시작하시나요?

2.1 위에서 아래로 레이아웃

2.2 외부에서 내부로 레이아웃

2.3 가로 방향을 먼저 왼쪽과 오른쪽으로 나눈 다음 왼쪽 또는 오른쪽으로 추가 레이아웃할 수 있습니다.

7. 부동 요소 높이 문제

1. 높이는 상위 요소의 높이를 지원할 수 있습니다.

2. 부동 흐름에 있는 요소는 상위 요소의 높이를 지원할 수 없습니다. !(상위 요소는 부동하지 않고 하위 요소만 부동)

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보는 PHP 중국어 웹사이트

기타

관련 기사를 참조하세요. !

추천 도서:

CSS 배경 및 스프라이트

CSS 표시 모드 사용 방법

위 내용은 웹페이지 레이아웃 및 플로팅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!