"CSS에 대한 최종 가이드"(중국어): 블록 수준 요소가 아닌 모든 표시 요소는 인라인 요소입니다. 성능의 특징은 "행 레이아웃" 형식입니다. 여기서 "행 레이아웃"은 표현 형식이 항상 행으로 표시된다는 의미입니다. 예를 들어 인라인 요소 border-bottom:1px solid #000;을 설정하면 각 행에서 반복되며 각 행 아래에 얇은 검정색 선이 표시됩니다. 블록 수준 요소인 경우 표시된 검은색 선은 블록 아래에만 나타납니다.
p, h1, div와 같은 요소는 종종 블록 수준 요소라고 하며 이러한 요소는 Strong 및span과 같은 요소를 콘텐츠 블록으로 표시하며 해당 콘텐츠는 라인에 표시됩니다. , "인라인 상자". (display=block을 사용하여 인라인 요소를 블록 요소로 변환할 수 있습니다. display=none은 생성된 요소에 프레임이 전혀 없으며 요소를 표시하지도 않고 문서에서 공간을 차지하지도 않음을 의미합니다.)
A: 인라인 요소는 행 내의 요소이며 한 줄에만 배치할 수 있습니다. 블록 수준 요소는 4개의 정사각형 상자에 불과하며 페이지의 어느 곳에나 배치할 수 있습니다.
B: 직설적으로 말하면 인라인 요소는 단어와 같습니다. 블록 수준 요소는 달리 정의되지 않으면 자체 라인에 나타납니다.
C: 단락 <p>, 제목 <h1><h2>..., 목록, <ul><ol><li>, 표 <table>, 양식 <form>, DIV<div 등 일반 블록 수준 요소 > 및 BODY <body> 및 기타 요소. 인라인 요소는 다음과 같습니다: 양식 요소 <input>, 하이퍼링크 <a>, 이미지 <img>, <span>…..
D: 블록 수준 요소의 주목할만한 특징은 각 블록 수준 요소가 새 줄에 표시되기 시작하고 후속 요소도 새 줄에 표시되어야 한다는 것입니다.
E: <span>은 CSS 정의의 인라인 요소인 반면 <div>는 블록 수준 요소입니다.
컨테이너라는 단어를 사용하면 그 존재와 목적을 시각적으로 더 쉽게 이해할 수 있습니다. 인라인 요소는 작은 컨테이너에 해당하고 <div>는 큰 컨테이너에 해당합니다. 물론 작은 컨테이너를 큰 컨테이너에 넣을 수도 있습니다. <span>은 작은 컨테이너입니다.
블록 요소는 일반적으로 다른 요소에 대한 컨테이너 요소입니다. 일반적으로 인라인 요소와 다른 블록 요소를 수용할 수 있습니다. 블록 요소 "form"은 비교합니다. 특수한 점은 다른 블록 요소를 포함하는 데에만 사용할 수 있다는 것입니다.
CSS의 도움이 없으면 블록 요소는 한 번에 한 행씩 정렬됩니다. CSS를 사용하면 이 HTML의 기본 레이아웃 모드를 변경하고 원하는 위치에 블록 요소를 배치할 수 있습니다. 매번 어리석게 새로운 줄을 시작하는 대신. 테이블 태그도 일종의 블록 요소라는 점에 유의해야 합니다. 테이블 기반 레이아웃과 CSS 기반 레이아웃은 이 두 레이아웃을 일반 사용자(시각 장애인, 시각 장애인 등 제외)의 관점에서 봅니다. 페이지 로딩 속도 차이 외에는 별 차이가 없습니다. 그러나 일반 사용자가 실수로 페이지 소스코드 보기 버튼을 클릭하게 된다면 둘 사이의 차이는 매우 커질 것입니다. 좋은 재구성 개념을 바탕으로 설계된 CSS 레이아웃 페이지 소스 코드는 최소한 웹 개발 경험이 없는 일반 사용자도 내용을 빠르게 이해할 수 있도록 해줍니다. 이러한 관점에서 CSS 레이아웃 코드는 더 나은 미적 경험을 제공해야 합니다.
블록 컨테이너 요소 div를 상자로 생각하거나 클리핑 작업을 해본 경우 이해하기 더 쉬울 것입니다. 먼저 다양한 신문과 잡지에서 필요한 기사를 잘라냈습니다. 컷된 콘텐츠의 각 조각은 블록입니다. 그런 다음 레이아웃 의도에 따라 이 종이 조각을 새 백지 조각에 붙였습니다. 이것은 당신만의 독특한 초록을 형성할 것입니다. 기술의 확장으로 웹 레이아웃 디자인도 동일한 패턴을 따릅니다.
인라인 요소는 일반적으로 의미 수준의 기본 요소를 기반으로 합니다. 인라인 요소는 텍스트나 기타 인라인 요소만 담을 수 있으며 일반적인 인라인 요소인 "a"는 다음과 같습니다.
블록 요소(block 요소)와 인라인 요소(inline 요소)는 HTML 사양의 개념입니다. 블록 요소와 인라인 요소의 기본적인 차이점은 블록 요소가 일반적으로 새 줄에서 시작된다는 것입니다. CSS 컨트롤이 추가되면 블록 요소와 인라인 요소 간의 이러한 속성 차이는 더 이상 차이가 되지 않습니다. 예를 들어 인라인 요소 cite에 display:block과 같은 속성을 추가하면 매번 새 줄에서 시작하는 속성도 갖게 됩니다.
변경 가능한 요소의 기본 개념은 해당 요소가 컨텍스트에 따라 블록 요소인지 인라인 요소인지 결정해야 한다는 것입니다. 가변 요소는 여전히 위의 두 요소 카테고리에 속합니다. 컨텍스트가 해당 카테고리를 결정하면 블록 요소 또는 인라인 요소의 규칙을 따라야 합니다. 대략적인 요소 분류는 전체 텍스트를 참조하세요.
ps: 인라인 요소의 중국어 이름에는 인라인 요소, 인라인 요소, 인라인 요소, 인라인 요소 등 여러 종류가 있습니다. 기본적으로 통일된 번역이 없으므로 원하는 대로 부르시면 됩니다. 또한 인라인 요소에 대해 이야기할 때 display:inline이라는 표시 속성을 생각해 보겠습니다. 이 속성은 유명한 IE 이중 부동 테두리(부동 여백) 문제를 해결할 수 있습니다.
블록 요소
* 주소 - 주소
* blockquote - 블록 인용
* 중심 - 중심 정렬 블록
* dir - 디렉토리 목록
* div - 일반적으로 사용되는 블록 레벨은 CSS 레이아웃의 주요 태그이기도 합니다.
* dl - 정의 목록
* fieldset - 양식 제어 그룹
* 양식 - 대화형 양식
* h1 - 제목
* h2 - 자막
*h3 - 레벨 3 제목
*h4 - 레벨 4 제목
*h5 - 레벨 5 제목
*h6 - 레벨 6 제목
*hr - 수평 구분선
* isindex - 입력 프롬프트
*메뉴 - 메뉴 목록
* noframes - 프레임 선택적 콘텐츠(프레임을 지원하지 않는 브라우저의 경우 이 블록 콘텐츠 표시)
*noscript -) 선택적 스크립트 콘텐츠(스크립트를 지원하지 않는 브라우저의 경우 이 콘텐츠 표시)
*ol - 정렬 형식
* p - 단락
* 미리 서식이 지정된 텍스트
* 테이블 - 테이블
* ul - 정렬되지 않은 목록 인라인 요소(인라인 요소)
* a - 앵커 포인트
*abbr - 약어
*약어 - 초기 단어
* b - 굵게(권장하지 않음)
* bdo - bidi 재정의
* 큰 - 큰 글꼴
* br - 줄 바꿈
*인용 - 인용
* 코드 - 컴퓨터 코드(소스코드 인용시 필수)
* dfn - 필드 정의
*em - 강조
* 글꼴 - 글꼴 설정(권장하지 않음)
* i - 이탤릭체
* img - 이미지
* 입력 - 입력 상자
* kbd - 키보드 텍스트 정의
* 라벨 - 테이블 라벨
*q - 짧은 인용문
* s - 대시(권장하지 않음)
* samp - 샘플 컴퓨터 코드를 정의합니다.
* 선택 - 항목 선택
* 작은 - 작은 글꼴 텍스트
* 범위 - 텍스트 내의 블록을 정의하기 위해 일반적으로 사용되는 인라인 컨테이너
* 스트라이크 - 중앙선
*strong - 굵은 강조
* 하위 - 아래 첨자
* 저녁 - 위 첨자
* textarea - 여러 줄의 텍스트 입력 상자
*tt - 텔렉스 텍스트
* u - 밑줄
* var - 가변 가변 요소를 정의합니다. 가변 요소는 상황에 따라 블록 요소 또는 인라인 요소입니다.
* 애플릿 - 자바 애플릿
* 버튼 - 버튼
* del - 텍스트 삭제
* iframe - 인라인 프레임
* ins - 삽입된 텍스트
* 지도 - 이미지 블록(지도)
* 객체 - 객체 객체
* 스크립트 - 클라이언트 스크립트
인기도 : 26% [?]