인라인 요소와 블록 수준 요소의 차이점은 무엇입니까?

블록 수준 요소

1. 항상 새 줄에서 시작합니다

2. 높이, 줄 높이, 여백 및 패딩을 모두 제어할 수 있습니다

3 너비는 기본적으로 브라우저의 100%로 설정됩니다.

4. 인라인 요소 및 기타 블록 요소를 수용할 수 있습니다

인라인 요소

1. 인접한 요소와 같은 줄에

2. 높이와 너비는 유효하지 않지만 가로 방향의 패딩과 여백은 허용됩니다. 3. 기본 너비는 자체 콘텐츠의 너비입니다

4. 인라인 요소는 텍스트 또는 기타 인라인 요소만 수용할 수 있습니다(a 제외)

(추천 비디오 튜토리얼:
css 비디오 튜토리얼

)

참고:

1. 텍스트만 단락을 구성할 수 있으므로 블록 수준 요소는 p에 배치할 수 없습니다. 마찬가지로 h1-h6, dt 등의 태그가 있습니다. 모두 텍스트입니다. 블록 수준 태그 및 기타 블록 수준 요소는 여기에 배치할 수 없습니다

2, 링크 내부에는 더 이상 링크를 배치할 수 없습니다

블록 수준 요소와 인라인 요소의 차이점

블록의 특징 -수준 요소:

1. 항상 새 줄부터 시작

2. 높이, 줄 높이, 여백을 조절할 수 있습니다

3 기본 너비는 브라우저의 100%입니다

4. 인라인 요소 및 기타 블록 요소 수용

인라인 요소의 특징:

1. 인접한 인라인 요소와 한 줄에

2. 높이와 너비는 유효하지 않지만 가로 방향의 패딩과 여백은 설정할 수 있습니다. , 세로 방향은 유효하지 않습니다

3. 기본 너비는 자체 콘텐츠의 너비입니다

4. 인라인 요소는 텍스트 또는 기타 인라인 요소만 수용할 수 있습니다. 요소(a 제외)

인라인 블록

인라인 요소에는 , , 와 같은 몇 가지 특수 태그가 있으며 너비, 높이 및 정렬 속성을 설정하여 이를 제어할 수 있습니다. 일부 소스에서는 이를 인라인 블록 요소라고 부를 수 있습니다.

기능:

1. 인접한 인라인 요소(행 내부)와 동일한 줄에 있지만 그 사이에는 빈 간격이 있습니다.

2. 기본 너비는 자체 콘텐츠의 너비입니다.

3. 높이, 행 높이, 여백 및 패딩을 모두 제어할 수 있습니다

라벨 표시 모드 변환 표시

블록에서 인라인으로: 디스플레이:인라인;

인라인에서 블록으로: 디스플레이:블록;

블록 및 인라인 요소 인라인 블록으로 변환됨: display:inline-block;

권장 튜토리얼:
css 빠른 시작

위 내용은 인라인 요소와 블록 수준 요소의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!