요소를 행으로 배열할 때 CSS에서 display:inline-block과 float의 차이점

레이아웃 중에 요소를 일렬로 배열해야 하는 디자인이 많습니다. 호환성과 사용 편의성의 관점에서 먼저 display:inline-block(인라인 블록으로 표시됨)을 소개합니다. 플로트 (플로트). ㅋㅋㅋ                                                                         . 플로팅 요소의 특징은 무엇입니까? 아래와 같이

1. 는 너비와 높이를 지원합니다.

   는 한 줄로 표시됩니다.

2. 너비가 설정되지 않은 경우 너비는 내용에 따라 늘어납니다. 지정된 순서는 부동 요소에 닿거나 상위 요소의 경계에서 멈출 때까지 이동합니다.
   요소가 부동된 후에는 부동 요소의 상위 요소 높이가

3. 문서 흐름에서 벗어납니다. 요소가 부동된 후에는 위쪽 및 아래쪽 여백이 다시 쌓이지 않습니다.

4. BFC를 트리거합니다.

5. inline-block: 인라인 요소의 특성과 블록 수준 요소의 특성을 모두 갖춘 인라인 블록입니다. 아래와 같이

6. 는 너비와 높이를 지원합니다.

7. 코드 줄 바꿈은 공백으로 구문 분석됩니다.

8. 기본적으로 인라인 블록 유형 요소의 하단에 간격이 있습니다.

inline-b 유형 요소는 위쪽 및 아래쪽 여백과 겹치지 않습니다. BFC.

1. 이 두 스타일의 특징은 다음과 같습니다. 1. 너비와 높이를 지원합니다. 2. 한 줄로 표시합니다. 3. 콘텐츠가 설정되지 않은 경우 너비가 지원됩니다. 7. 위쪽과 아래쪽 여백이 겹치지 않고 8. BFC를 트리거합니다. 이 기능을 행에 표시하면 요소를 행에 정렬할 수 있는지 여부가 결정됩니다. 따라서 차이점을 사용할 때는 서로 다른 특성에서 분석을 시작해야 합니다.

2. 배열 방향 제한. float의 네 번째 특징은 요소의 순서를 결정할 수 있다는 것입니다. float:left: 요소가 왼쪽에서 오른쪽으로 정렬됩니다. float:right: 요소가 오른쪽에서 왼쪽으로 정렬됩니다. 그리고 display:inline-block은 왼쪽에서 오른쪽으로만 사용할 수 있습니다.

3. 문서 흐름에서 벗어날 것인지. 플로팅 요소는 문서 흐름에서 벗어나지만, display:inline-block은 그렇지 않습니다. 따라서 현상이 발생합니다. 첫 번째 부동 요소 또는 인라인 블록 요소가 이미 행을 차지하고 두 번째 요소에 margin-left:-100%를 추가하면 두 번째 부동 요소가 두 번째 부동 요소 위에 표시됩니다. 요소인 두 번째 인라인 블록은 새 줄에 표시되고 왼쪽 여백에 따라 이동됩니다.

4. 부동 요소는 상위 요소의 높이만큼 축소됩니다. 상위 요소의 높이가 무너지는 것을 방지하려면 플로트를 사용할 때 이 기능을 처리해야 합니다. 상위 요소의 높이를 설정하거나 플로트를 지웁니다.

5. 인라인 블록 하단에 틈이 있습니다. 기본적으로 요소입니다. 웹 페이지를 만들 때 수직 정렬을 설정해야 합니다. 간격을 없애려면 수직 정렬을 사용하세요.

6. 인라인 블록 유형 요소는 HTML 코드가 줄바꿈될 때 공백을 생성합니다. to: 인라인 요소를 한 줄로 작성하거나 스타일에서 인라인 요소의 상위 글꼴 크기를 0으로 설정합니다.

7. 위의 차이점 분석을 통해 이미 float와 inline의 장단점을 확인할 수 있습니다. -block: float 이후, 대부분의 경우 float를 지우거나 높이를 설정해야 합니다. display:inline-block은 기본 배열(왼쪽에서 오른쪽으로)을 변경하지 않고만 사용할 수 있으며, 코드 줄바꿈으로 인해 발생하는 하단 틈과 좌우 공백을 지워야 합니다.

위 내용은 요소를 행으로 배열할 때 CSS에서 display:inline-block과 float의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!