CSS 부동 작성 방법

이 장에서는 일반적으로 사용되는 위치 지정 및 플로팅 기능을 주로 기록합니다.

1. Floating

Floating이라고 하면 먼저 표준흐름(Standard Flow)과 부동흐름(Floating Flow)에 대해 이야기해야 합니다.

1. 표준 스트림

표준 스트림은 매우 일반적이며 브라우저의 기본 방법은 표준 스트림입니다.
표준 스트림을 이해하는 방법은 무엇입니까?
구현하려면 CSS의 세 가지 요소 분류를 알아야 합니다.

인라인 요소, 블록 수준 요소, 인라인 블록 수준 요소

인라인 요소	블록 수준 요소	인라인 블록 수준 요소
한 줄만 차지하지 않음	한 줄만 차지	한 줄은 배타적이지 않음
기본값은 콘텐츠와 동일한 너비	기본값은 상위 요소와 동일한 너비	기본값은 콘텐츠
너비와 높이를 설정할 수 없습니다.	너비와 높이를 설정할 수 있습니다	너비와 높이를 설정할 수 있습니다

대략 세 가지 요소의 차이점이 나옵니다.
여기에 또 다른 지식 포인트를 삽입하세요:
HTML에서 요소(태그)는 일반적으로

컨테이너 수준 태그	텍스트 수준 태그
p h ul ol li dt 등 두 가지 범주로 나뉩니다.	span/p/em/ins 등
다른 모든 태그를 중첩할 수 있습니다.	텍스트/그림/하이퍼링크만 중첩할 수 있습니다.

이제 표준 흐름에 대해 이야기할 수 있습니다.

In the 표준 흐름에는 두 가지 레이아웃 방법이 있습니다. 블록 수준 요소는 수직으로 레이아웃되고 인라인 블록 수준 레이아웃은 수평으로 배치됩니다.

2. 부동 흐름

플로팅 속성:

clear	clear	float	float
left/right	floating은 허용되지 않습니다	left/right	float left/right
모두/없음	모두/없음	없음	부동 없음

떠 있을 때 주의해야 할 몇 가지 사항이 있습니다:

플로팅은 부동을 설정한 후 요소가 요소 주위에 떠다니는 방식을 나타냅니다! ! !

예를 들어 오른쪽은 다음 요소가 왼쪽에 배치된다는 의미입니다! ! !

Floating flow는 요소를 구분하지 않고 가로로만 입력할 수 있으며, margin: 0 auto는 너비와 높이를 모두 설정할 수 없습니다.

Features

이전 항목이 뜨고 후속 항목이 뜨지 않으면 이전 항목이 후자를 덮게 됩니다(텍스트는 이를 덮지 않지만 여기서는 둘러싸게 됩니다). 떠다니는 배치 장면을 모두 떠올려 볼 수 있습니다.

먼저 뜨는 것은 앞쪽에 있고 나중에 뜨는 것은 뒤쪽에 있게 됩니다

플로팅 후의 위치는 플로팅 전의 표준 흐름에서의 위치에 따라 주로 어떤 요소로 이해됩니다. float 이후에 영향을 받습니다

왼쪽 플로트는 왼쪽 플로트를 찾고 오른쪽 플로트는 오른쪽 플로트를 따릅니다

상위 요소의 너비가 모든 플로트를 표시할 수 있으면 나란히 표시됩니다. side

플로트가 붙는다는 것은 주로 부모 요소의 너비가 부족할 때 앞으로 기울어지는 현상을 말합니다. 창을 줄이고 창 너비를 줄이면 사진이 자동으로 아래쪽으로 정렬됩니다

위 내용은 CSS 부동 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!