HTML 인라인 요소와 블록 요소란 무엇입니까?
- 青灯夜游원래의
- 2021-02-20 16:03:5418119검색
html 인라인 요소에는 다음이 포함됩니다: a(앵커 요소), b(굵게), br(줄 바꿈), code, em(강조), 글꼴(글꼴 설정), i(기울임꼴), img(그림), 입력( 입력 box),span,strong(굵은 강조), textarea, u 등 블록 요소에는 address(주소), blockquote(블록 인용), center(중앙 정렬 블록), div, h1~h6(제목), hr(가로 구분선), p, ul, ol 등
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
인라인 요소 및 블록 요소에 대한 설명
CSS 사양에 따르면 각 웹 페이지 요소에는 요소 유형을 결정하는 데 사용되는 표시 속성이 있습니다. 예를 들어 각 요소에는 기본 표시 속성 값이 있습니다. 에서 div 요소는 기본 표시 속성 값이 "block"이고 "블록 수준" 요소가 되는 반면, 범위 요소는 기본 표시 속성 값이 "inline"이고 "inline" 요소라고 합니다.
div와 같은 블록 수준 요소는 자동으로 특정 직사각형 공간을 차지합니다. 반대로 "span" 및 "a"와 같은 높이, 너비, 내부 및 외부 여백과 같은 속성을 설정하여 이 직사각형의 모양을 조정할 수 있습니다. 인라인 요소에는 자체 독립 공간이 없으며 다른 블록 수준 요소에 종속됩니다. 따라서 인라인 요소에 높이, 너비, 내부 및 외부 여백과 같은 속성을 설정하는 것은 유효하지 않습니다.
인라인 요소와 블록 요소의 차이점:
(1) 블록 수준 요소는 단독 라인을 차지하며 해당 너비는 자동으로 상위 요소의 너비를 채웁니다.
인라인 요소는 단독 라인을 차지하지 않습니다. 인접한 인라인 요소는 같은 행에 배열되며 한 행에 맞지 않을 때까지 줄바꿈되지 않으며 요소의 내용에 따라 너비가 변경됩니다
(2). 너비 및 높이 속성을 설정할 수 있으며 인라인 요소의 너비 및 높이 설정은 유효하지 않습니다
(참고: 블록 수준 요소의 너비가 설정되어 있어도 여전히 전용 라인을 차지합니다)
(3). 인라인 요소의 수평 패딩-왼쪽, 패딩-오른쪽, 마진-왼쪽, 마진-오른쪽은 모두 여백과 패딩을 설정할 수 있지만 수직 패딩-상단, 패딩-하단, 여백-상단 및 margin-bottom은 여백 효과를 생성하지 않습니다. (가로 방향에서는 유효, 세로 방향에서는 무효)
block 요소(블록 요소) * address - 주소
* blockquote - block quote * div - 일반적으로 사용되는 블록 수준, CSS 레이아웃의 기본 태그 * dl - 정의 목록 * fieldset - 양식 제어 그룹 * 양식 - 대화형 양식 * h1 - 제목
* h2 - 자막
* h3 - 레벨 3 제목
* h4 - 레벨 4 제목
* 메뉴 - 메뉴 목록
* noframes - 프레임 선택적 콘텐츠(이 블록 콘텐츠는 프레임을 지원하지 않는 브라우저에 표시됩니다.
* noscript - 선택적 스크립트 콘텐츠(이 콘텐츠는 프레임을 지원하지 않는 브라우저에 표시됨) 스크립트를 지원하지 않는 브라우저)
* ol - 정렬된 형식
* p - 단락
* pre - 서식 있는 텍스트
* 테이블 - 테이블
* a - 앵커 포인트
* abbr - 약어
* cite - 인용
* code - 컴퓨터 코드(소스 코드 인용 시 필수)
* dfn - 정의 필드
* em - 강조
* 글꼴 - 글꼴 설정(권장하지 않음)
* i - italic
img - 그림
* input - 입력 상자
* kbd - 키보드 텍스트 정의 * label - 테이블 레이블
* q - 짧은 따옴표
samp - 정의 예 컴퓨터 코드
* select - 항목 선택
* small - 작은 글꼴 텍스트
* sub - 아래 첨자
* sup - 위 첨자
* textarea - 여러 줄 텍스트 입력 상자
* tt - 텔렉스 텍스트
* u - 밑줄
* 애플릿 - 자바 애플릿 * 버튼 - 버튼
* del - 텍스트 삭제
* iframe - 인라인 프레임
* 개체 - 개체 개체
* 스크립트 - 클라이언트 스크립트
관련 추천: "
HTML 비디오 튜토리얼"
위 내용은 HTML 인라인 요소와 블록 요소란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!