블록 요소 블록 요소 및 인라인 요소 인라인 요소_CSS/HTML

블록 수준 요소를 인라인 수준 요소에 삽입하려고 했습니다. 이는 허용되지 않습니다. 블록 수준 요소를 인라인 요소에 삽입할 수 있는 가능성에 대한 유일한 예외는 개체 태그입니다. 그렇다면 인라인 수준 요소와 블록 수준 요소는 무엇입니까? .

블록 요소는 일반적으로 다른 요소에 대한 컨테이너 요소입니다. 블록 요소는 일반적으로 인라인 요소와 기타 블록 요소를 수용할 수 있습니다. " 블록 요소는 특별합니다. 다른 블록 요소를 수용하는 데에만 사용할 수 있습니다.

CSS 기능이 없으면 블록 요소는 한 번에 한 행씩 정렬됩니다. CSS를 사용한 후 기본값을 변경할 수 있습니다. 이 HTML의 레이아웃 모드를 사용하여 원하는 위치에 블록 요소를 배치하세요. 매번 새 줄을 시작하는 어리석은 대신 일반 사용자의 관점에서 보면 테이블 태그도 블록 요소라는 점을 지적해야 합니다(시각적 제외). 장애인, 시각 장애인 등), 페이지 로딩 속도의 차이를 제외하고는 테이블 기반 레이아웃과 CSS 기반 레이아웃 사이에 다른 차이점이 없습니다. 그러나 사용자가 실수로 페이지 소스 코드 보기 버튼을 클릭한 후, 둘 사이의 차이는 매우 큽니다. 좋은 재구성 개념을 기반으로 설계된 CSS 레이아웃 페이지 소스 코드는 적어도 웹 개발 경험이 없는 일반 사용자가 이러한 관점에서 콘텐츠를 더 빨리 이해할 수 있도록 해야 합니다.

블록 컨테이너 요소 div를 상자로 상상해 보거나, 클리핑을 사용해 본 적이 있다면 먼저 다양한 신문과 기사에서 필요한 기사를 잘라내는 것이 더 쉬울 것입니다. 각 컷의 내용은 블록이며, 우리는 이 종이 조각들을 우리의 레이아웃 의도에 따라 재배열합니다. 이것은 당신만의 독특한 다이제스트를 만듭니다.

인라인 요소(인라인 요소는 일반적으로 의미적 수준에서 기본 요소를 기반으로 합니다. 인라인 요소는 텍스트나 기타 인라인 요소만 수용할 수 있습니다. 일반적인 인라인 요소 "a" ".

블록 요소와 인라인 요소는 모두 HTML 사양의 개념입니다. 블록 요소와 인라인 요소의 기본적인 차이점은 블록 요소가 일반적으로 새 줄에서 시작된다는 것입니다. CSS 컨트롤이 추가되면 블록 요소와 인라인 요소 간의 이러한 속성 차이는 더 이상 차이가 되지 않습니다. 예를 들어 인라인 요소 cite에 display:block과 같은 속성을 추가하면 매번 새 줄에서 시작하는 속성도 갖게 됩니다.


가변 요소의 기본 개념은 컨텍스트에 따라 해당 요소가 블록 요소인지 인라인 요소인지 판단해야 한다는 것입니다. 가변 요소는 여전히 위의 두 요소 카테고리에 속합니다. 컨텍스트가 해당 카테고리를 결정하면 블록 요소 또는 인라인 요소의 규칙을 따라야 합니다. 대략적인 요소 분류는 전체 텍스트를 참조하세요.

ps: 인라인 요소의 중국어 이름에는 인라인 요소, 인라인 요소, 인라인 요소, 인라인 요소 등 여러 종류가 있습니다. 기본적으로 통일된 번역은 없습니다. 원하는 대로 부르시면 됩니다. 또한, 인라인 요소에 관해 이야기할 때 우리는 display:inline이라는 표시 속성을 생각할 것입니다. 이 속성은 유명한 IE 이중 부동 테두리 문제를 해결할 수 있습니다.

블록 요소
* 주소 - 주소
* blockquote - 블록 인용
* center - 정렬 블록
* dir - 디렉토리 목록
* div - 일반적으로 사용되는 블록 수준은 다음과 같습니다. 쉽고 CSS 레이아웃의 주요 태그이기도 합니다
* dl - 정의 목록
* fieldset - 양식 제어 그룹
* form - 대화형 양식
* h1 - 큰 제목
* h2 - 자막
* h3 - 레벨 3 제목
* h4 - 레벨 4 제목
* h5 - 레벨 5 제목
* h6 - 레벨 6 제목
* hr - 가로 구분선
* isindex - 입력 프롬프트
* 메뉴 - 메뉴 목록
* noframes - 프레임 선택적 콘텐츠(프레임을 지원하지 않는 브라우저의 경우 이 블록 콘텐츠 표시
* noscript -) 선택적 스크립트 콘텐츠(프레임을 지원하지 않는 브라우저의 경우) 지원 프레임) 스크립트를 지원하지 않는 브라우저에서는 이 내용이 표시됩니다.)
* ol - 정렬된 형식
* p - 단락
* 사전 - 형식화된 텍스트
* 테이블 - 테이블
* ul - 정렬되지 않은 목록

인라인 요소
* a - 앵커 포인트
* abbr - 약어
* 약어 - 첫 단어
* b - 굵게(권장하지 않음)
* bdo - bidi 재정의
* big - 큰 글꼴
* br - 줄 바꿈
* cite - quote
* code - 컴퓨터 코드(소스 코드를 인용할 때 필요)
* dfn - 필드 정의
* em - 강조
* 글꼴 - 글꼴 설정(권장하지 않음)
* i - 기울임체
* img - 그림
* 입력 - 입력 상자
* kbd - 키보드 텍스트 정의
* 라벨 - 테이블 라벨
* q - 짧은 따옴표
* s - 밑줄(권장하지 않음)
* samp - 샘플 컴퓨터 코드 정의
* select - 프로젝트 선택
* 소형 - 소형 글꼴 텍스트
* 범위 - 일반적으로 사용되는 인라인 컨테이너, 텍스트 블록 정의
* 파업 - 밑줄
* 강함 - 굵은 강조
* 하위 - 하단 위 첨자
* sup - 위 첨자
* textarea - 여러 줄의 텍스트 입력 상자
* tt - 텔렉스 텍스트
* u - 밑줄
* var - 변수 정의

변수 요소
변수 요소는 요소가 상황에 따라 블록 요소 또는 인라인 요소.

* 애플릿 - Java 애플릿
* 버튼 - 버튼
* del - 텍스트 삭제
* iframe - 인라인 프레임
* ins - 삽입된 텍스트
* 지도 - 그림 블록 (맵)
* 객체 - 객체 객체
* 스크립트 - 클라이언트 스크립트