차단 수준의 차이점에 대해 알아보기 &인라인 블록 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의 모든 인라인 요소 목록:
<두문자어>
<오디오>
(보이는 컨트롤이 있는 경우에만)<버튼>
<캔버스>
<데이터>
<데이터 목록>
<입력>
<미터>
<출력>
<그림>
<진행률>
<스크립트>
<작은>
<템플릿>
<텍스트 영역>
<동영상>
블록과 인라인의 또 다른 주요 차이점
블록 및 인라인 요소가 다음과 같은 측면에서 다르다는 것을 배웠습니다.
- 전체 너비(블록) 대 콘텐츠 너비(인라인)
- 새 줄(블록) 대 같은 줄(인라인)
그러나 사용 방법에는 또 다른 차이점이 있습니다.
- 인라인 블록 요소는 할 수 없습니다. 블록 수준 요소를 포함합니다.
- 차단 요소는 할 수 있습니다. 인라인 블록 요소를 포함합니다.
따라서 이것은 아닙니다. 허용되는 HTML:
<span><p>Block element inside an inline block element.</p></span>
하지만 이것은 입니다 HTML에서 허용됨:
<p><span>Inline block element inside a block element.</span></p>
이러한 구조적 콘텐츠 모델 구별의 이면에 있는 아이디어는 블록 요소를 인라인 요소보다 더 큰 구조를 설명하는 데 사용해야 한다는 것입니다.
모든 HTML 요소는
표시
값은 CSS 스타일시트에서 재정의할 수 있지만 오늘 본 것은 직접 스타일을 지정하지 않으면 기본적으로 블록 수준 요소와 인라인 블록 요소가 작동하는 방식입니다.