CSS: 블록, 인라인 및 인라인 블록 사용법과 차이점

전체 개념

1. 블록과 인라인의 두 개념은 약어입니다. 완전하고 정확한 용어는 블록 수준 요소(블록 수준 요소)와 인라인 요소(인라인 요소)입니다. 블록 요소는 일반적으로 독립된 블록으로 구현되며 별도의 줄로 변경됩니다. 인라인 요소는 전후에 줄바꿈을 일으키지 않으며 줄이 가득 찰 때까지 일련의 인라인 요소가 한 줄에 표시됩니다.

2. 일반적으로 HTML 요소에는 자체 레이아웃 수준(블록 요소 또는 인라인 요소)이 있습니다.

• 일반적인 블록 수준 요소에는 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL이 포함됩니다. , UL 외.

• 일반적인 인라인 요소에는 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 등이 포함됩니다.

블록 요소에는 블록 요소와 인라인 요소가 포함될 수 있지만 인라인 요소에는 인라인 요소만 포함될 수 있습니다. 이는 일반적인 진술이며 각 특정 요소가 포함할 수 있는 요소도 구체적이므로 이 규칙은 개별 요소에 적용되지 않습니다. 예를 들어, P 요소는 인라인 요소만 포함할 수 있고 블록 요소는 포함할 수 없습니다.

일반적으로 디스플레이:인라인 및 디스플레이:블록 설정을 통해 요소의 레이아웃 수준을 변경할 수 있습니다.

블록, 인라인 및 인링크 블록 세부 사항 비교

추가 설명

• 일반적으로 요소의 레이아웃 수준을 조정하려면 display:block, display:inline 또는 display:inline-block을 사용합니다. 사실, 디스플레이 매개변수는 이 세 가지보다 훨씬 더 많으며 더 일반적으로 사용됩니다.

• IE(IE 하위 버전)는 원래 inline-block을 지원하지 않으므로 IE의 인라인 요소에는 display:inline-block을 사용합니다. 이론적으로 IE는 이를 인식하지 못하지만, display:inline-block을 사용하면 레이아웃은 IE에서 트리거되므로 인라인 요소는 display:inline-block 속성의 모양을 갖습니다.

• display:inline-block

• display:inline

• display:block

1. 은 단순히 객체를 인라인 객체로 렌더링하는 것을 의미하지만, 제시된 객체 블록 개체로. 후속 인라인 개체는 같은 줄에 정렬됩니다. 예를 들어, 링크(요소)에 inline-block 속성 값을 부여하여 블록의 너비와 높이 특성과 인라인의 피어 특성을 모두 갖도록 할 수 있습니다. ㅋㅋㅋ 요소.

2. 인라인 요소의 너비 및 높이 속성 설정이 유효하지 않습니다.
   

3. 인라인 요소의 여백 및 패딩 속성(horizontal padding-left, padding-right, margin-left 및 margin-right)은 모두 여백 효과를 생성하지만 수직 padding-top, padding-bottom, margin-top은 , margin-bottom은 여백 효과를 생성하지 않습니다.

블록 요소는 자체 줄을 차지하며 여러 블록 요소는 각각 새 줄을 갖습니다. 기본적으로 블록 요소의 너비는 자동으로 상위 요소의 너비를 채웁니다.

1. 블록 요소는 너비와 높이 속성을 설정할 수 있습니다. 블록 수준 요소의 너비를 설정하더라도 여전히 독점 라인을 차지합니다.
   

2. 블록 요소는 여백 및 패딩 속성을 설정할 수 있습니다.

위 내용은 CSS: 블록, 인라인 및 인라인 블록 사용법과 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!