HTML의 블록 수준 요소와 행 수준 요소의 비교 분석

블록 수준 요소와 인라인 요소 정보(인라인 요소 비교)

두 요소 비교

블록 수준 요소:

• 전후에 줄 바꿈이 있습니다

• 너비, 높이, 여백 등의 속성을 설정할 수 있습니다. 상자 모델을 참조하세요

• 은 내부에 다른 블록 수준 요소를 인라인으로 포함할 수 있습니다.

• 요소의 너비는 기본적으로 상위 요소의 너비로 설정되며 높이는 요소의 높이에 따라 설정되거나 결정될 수 있습니다. 내용

인라인 요소:

• 앞줄 바꿈 없음

• 너비 설정 요소의 높이는 유효하지 않습니다. 높이는 line-height에 의해 결정되며(설정되지 않은 경우 글꼴 크기에 따라 계산됩니다), 너비는 너비가 다음보다 큰 경우 콘텐츠의 양에 따라 결정됩니다. 인라인 요소의 경우 가로 방향에서는 패딩, 여백 등을 설정할 수 있지만 세로 방향의 경우에는 패딩 및 여백 설정이 다음과 같습니다. 효과가 있지만 브라우저에는 영향을 미치지 않으며 다른 요소의 레이아웃에는 영향을 미치지 않습니다.

• 은 다른 요소를 포함할 수 없습니다

• . 그러나 인라인 요소 중 일부는 대체 요소입니다(브라우저는 속성 설정에 따라 이를 확정합니다). 모양을 로드할 때) 너비 및 높이와 같은 속성을 설정할 수 있습니다. 예: img, input

블록 수준 요소 및 인라인 요소 변환

• 디스플레이 설정: block/inline-block

• 요소를 부동으로 설정

• 요소 위치 설정: 상대/ 절대/고정

HTML의 블록 수준 요소와 행 수준 요소의 비교 분석에 관한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!