> 웹 프론트엔드 > HTML 튜토리얼 > 인라인 요소와 블록 수준 요소의 차이점

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

高洛峰
풀어 주다: 2017-02-28 10:37:50
원래의
2568명이 탐색했습니다.

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

1. 인라인 요소는 한 줄 전체를 차지하지 않고, 모두 같은 줄에 있고 가로로 배열되어 있습니다.

 블록 수준 요소는 세로로 배열되어 한 줄을 차지합니다.

 2. 블록 수준 요소는 인라인 요소를 포함할 수 있고, 인라인 요소는 블록 수준 요소를 포함할 수 없습니다.

3. 인라인 요소와 블록 수준 요소의 속성 차이는 주로 박스 모델 속성으로 인해 인라인 요소의 너비 설정이 유효하지 않고 높이가 유효하지 않습니다( line-height 설정 가능), 위쪽 및 아래쪽 여백이 유효하지 않으며 위쪽 및 아래쪽 여백이 유효하지 않습니다.

2. 인라인 요소와 블록 수준 요소의 변환

인라인 요소의 변환 elements 블록 요소의 경우: display:block;

블록 요소는 다음으로 변환됩니다. 인라인 요소 : display:inline;

3.

문제 설명: img 및 input과 같은 인라인 요소의 너비와 높이를 설정할 수 있는 이유는 무엇입니까?

자세한 답변:

요소는 문서 구조의 기본입니다. CSS에서 각 요소는 요소의 콘텐츠를 포함하는 상자(상자, "상자"라고도 번역됨)를 생성합니다. 그러나 다른 요소는 다르게 표시됩니다. 예를 들어

도 다릅니다. 문서 유형 정의(DTD)의 다양한 요소에 대해 다양한 유형이 지정되는데, 이는 DTD가 문서에 중요한 이유 중 하나입니다.

1. 교체 가능한 요소와 교체 불가능한 요소

요소 자체의 특성에 따라 교체 가능한 요소와 교체 불가능한 요소로 나눌 수 있습니다. 강요.

a) 대체 요소

대체 요소는 브라우저가 태그와 속성을 기반으로 요소의 특정 표시 콘텐츠를 결정한다는 의미입니다.

예를 들어 브라우저는 태그의 src 속성 값을 기반으로 이미지 정보를 읽어서 표시하지만 (X) HTML 코드를 보면 이미지의 실제 내용; 또 다른 예 태그의 type 속성에 따라

는 입력 상자, 라디오 버튼 등을 표시할지 여부를 결정합니다.

  (X)HTML의 , ,