Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML 블록 수준 대 인라인 블록 요소(개요)

차단 수준의 차이점에 대해 알아보기 &인라인 블록 HTML의 요소.

HTML에서 모든 요소에는 기본 디스플레이가 있습니다. 모든 브라우저에 내장된 UAS(User Agent Stylesheet)에 의해 상속되는 값입니다.

두 가지 표시 값 옵션이 있습니다. 차단 및 인라인:

  • CSS의 차단:display:block;
  • CSS 인라인:디스플레이:인라인 블록;

HTML 요소의 동작 또는 스타일은 브라우저의 사용자 에이전트 스타일시트(UAS)에서 가져옵니다. — 쉽게 무시할 수 있습니다. 따라서 다음과 같은 간단한 선언으로 모든 블록 수준 요소를 인라인 요소로 변환할 수 있습니다. display:inline-block; — 그 반대도 마찬가지입니다.

블록 수준 요소란 무엇입니까?

HTML에서 블록 수준 요소 항상 새 줄에서 시작하고(예:줄 바꿈) 컨테이너(상위 요소)의 전체 너비를 차지하는 요소입니다.

따라서

를 추가하면 이 단락 바로 아래에 있는 요소는 왼쪽에서 오른쪽 가장자리까지 상위 요소 컨테이너의 전체 너비를 차지합니다.

코드 예:

<div>I’m a block-level element.</div>

결과:

나는 블록 수준의 요소입니다.

좋아, 그것이 전체 너비를 차지한다는 것을 알기 어렵습니다. 보기 쉽게 테두리를 추가해 보겠습니다.

<div style="border:1px solid #dd4c4f">I’m a block-level element.</div>

결과:

나는 블록 수준의 요소입니다.

이제

를 볼 수 있습니다. 요소는 컨테이너의 전체 너비를 차지합니다. 이 웹사이트는
입니다. 요소.

앞서 언급했듯이 블록 수준 요소는 새 줄을 시작하며 코드 수준에서 어떻게 보이고 사용자 관점에서 브라우저에서 렌더링되는지는 다음과 같습니다.

<div style="border:1px solid #dd4c4f">I’m a block-level element.</div>
<div style="border:1px solid #dd4c4f">I’m another block-level element.</div>

어떻게 생겼는지:

나는 블록 수준 요소입니다.나는 또 다른 블록 수준 요소입니다.

두 개의

위의 요소는 인라인입니다. 그들은 같은 줄에서 서로 바로 옆에 앉았습니다. (다음 섹션에서 볼 수 있듯이). 그러나 그것들은 블록 수준 요소이기 때문에 레이아웃에서 고유한 줄에 위치하며 각각 부모 컨테이너의 전체 너비를 차지합니다.

모든 HTML 블록 수준 요소

HTML의 블록 수준 요소 전체 목록:

<주소>
연락처.
기사 내용.
내용을 제외하고.
긴("블록") 인용.
공개 위젯.
<대화상자>
대화 상자.
설명 목록에 있는 용어를 설명합니다.
문서 분할.
설명 목록.
설명 목록 용어.
필드 세트 레이블.
그림 캡션.
캡션이 있는 그룹 미디어 콘텐츠 ).
<바닥글>
섹션 또는 페이지 바닥글.
입력 양식.

,

,

,

,
,

제목 수준 1-6.
<헤더>
섹션 또는 페이지 헤더.
그룹 헤더 정보.
수평선(분할선).


    • 목록 항목.
    <메인>
    주 콘텐츠 컨테이너.
    탐색 링크를 포함합니다.
    순서 목록.

    단락.
    <div style="display:inline-block;border:1px solid #dd4c4f;">
  I’m a inline-block element
</div>

    어떻게 생겼는지:

    나는 인라인 블록 요소입니다.

    인라인 블록 요소는 새 줄에서 시작하지 않습니다(줄 바꿈).

    따라서 코드 수준에서 나란히 두 개의 인라인 블록 요소가 있는 경우:

    <div style="display:inline-block;border:1px solid #dd4c4f">
  I’m a inline block element.
</div>
<div style="display:inline-block;border:1px solid #dd4c4f">
  I’m a another inline block element.
</div>

    그런 다음 브라우저에서 다음과 같이 렌더링합니다.

    나는 인라인 블록 요소입니다. 저는 인라인 또 다른 블록 요소입니다.

    인라인 블록과 블록이 어떻게 다른지 알아보기 위해 "나란히" 비교해 보겠습니다.

    나는 인라인 블록 요소입니다.나는 블록 요소입니다.

    모든 HTML 인라인 블록 요소

    HTML의 모든 인라인 요소 목록:

    <두문자어>
    <오디오> (보이는 컨트롤이 있는 경우에만)
    <버튼>
    <캔버스>
    <데이터>
    <데이터 목록>