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

高洛峰
풀어 주다: 2017-03-06 15:01:05
원래의
1174명이 탐색했습니다.

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

두 요소 비교

블록 수준 요소:

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

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

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

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

인라인 요소:

  • 앞줄 바꿈 없음

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

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

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

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

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

  • 요소를 부동으로 설정

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

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿