CSS 문서 흐름 및 블록 수준 요소(블록) 및 인라인 요소(인라인) 이전에 많은 책을 읽었고 많은 기사를 읽었습니다. 내가 본 것은 CSS 레이아웃에 대한 단편적인 기본 지식뿐이며 이는 상대적으로 피상적입니다. Reilly의 "The Definitive Guide to CSS"에서 언급된 문서 흐름의 개념이 나를 매우 예민하게 만들었다는 사실을 발견했습니다. 불행히도 이 책에서는 문서 흐름이 무엇인지 설명하지 않았으므로 언급할 가치가 없다고 생각했을 수도 있습니다. 하지만 이 개념이 정말 중요하다고 생각해서 여러 가지 CSS 레이아웃 이론을 이해하게 되었고, CSS 디자인의 합리성을 깨닫게 되면서 이런 생각을 하게 되었습니다. 오류가 있는 경우 이는 완전히 정상적인 현상입니다.
문서 흐름은 양식을 위에서 아래로 행으로 나누고 각 행의 요소를 왼쪽에서 오른쪽으로 정렬하는 것이 문서 흐름입니다.
각각의 비부동 블록 수준 요소는 자체 라인을 차지하고 부동 요소는 필요에 따라 라인의 한쪽 끝에 부동됩니다. 현재 줄이 맞지 않으면 새 줄에 부동됩니다.
인라인 요소는 행을 차지하지 않습니다. 거의 모든 요소(블록 수준, 인라인 및 목록 요소 포함)는 하위 요소 배치를 위한 하위 행을 생성할 수 있습니다.
문서 흐름 외부에 요소가 존재하게 되는 세 가지 상황, 즉 부동, 절대 위치 및 고정 위치가 있습니다. 그러나 IE에서는 부동 요소도 문서 흐름에 존재합니다(이것이 합리적이라고 생각합니다><).
플로팅 요소는 일반적인 문서 흐름 공간을 차지하지 않으며 플로팅 요소의 위치는 여전히 일반적인 문서 흐름을 기반으로 하며 문서 흐름에서 추출되어 가능한 한 왼쪽이나 오른쪽으로 이동됩니다. 텍스트 콘텐츠는 부동 요소 주위에 배치됩니다. 일반 문서 흐름에서 요소가 추출되면 문서 흐름에 남아 있는 다른 요소는 해당 요소를 무시하고 원래 공간을 채웁니다.
플로팅의 혼란스러운 개념은 브라우저의 이론 해석으로 인해 발생합니다. 많은 사람들이 IE를 표준으로 사용한다고 할 수 있지만 실제로는 그렇지 않습니다.
문서 흐름을 기반으로 다음과 같은 위치 지정 패턴을 쉽게 이해할 수 있습니다.
상대 위치 지정, 즉 문서 흐름의 요소 위치를 기준으로 오프셋되지만 원래 자리 표시자는 유지됩니다.
절대 위치 지정, 즉 문서 흐름에서 완전히 벗어난 위치 속성의 비정적 값을 사용하여 가장 가까운 상위 요소를 기준으로 오프셋 및 고정 위치 지정, 즉 문서 흐름에서 완전히 벗어난 오프셋입니다.
아직 이해해야 할 몇 가지 질문이 있습니다.
1.
세 가지 기본 요소 중 인라인 요소와 블록 수준 요소의 주요 차이점은 무엇입니까?
2. Clear 속성이 올바른 값을 취하는 경우를 어떻게 이해합니까? 실험 상황이 항상 이론과 일치하지 않는 것 같습니다.
인라인 요소는 무엇을 의미합니까? 블록 수준 요소란 무엇입니까?
"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>는 블록 수준 요소입니다.
CSS를 배워본 사람이라면 금방 이해할 수 있을 것입니다. 하지만 초보자가 이해하기 쉽지 않기 때문에 주로 초보자에게 좀 더 친숙하게 만들고 싶습니다!
컨테이너라는 단어를 사용하면 그 존재와 목적을 시각적으로 더 쉽게 이해할 수 있습니다. 인라인 요소는 작은 컨테이너에 해당하고 <div>는 큰 컨테이너에 해당합니다. 물론 작은 컨테이너를 큰 컨테이너에 넣을 수도 있습니다. <span>작은 용기입니다. 이렇게 하면 큰 용기에 물을 넣고 싶다는 생각이 들 수 있습니다. 하지만 잉크도 넣고 싶다면 어떻게 해야 할까요? 아주 간단합니다. 작은 용기를 꺼내서 잉크를 채우고 큰 용기에 담긴 깨끗한 물에 담습니다.
간단한 실제 예를 들어 보겠습니다. 예를 들어 <div>I love CSS - 52CSS.com</div>
CSS를 사용하여 문자 c의 스타일을 지정하고 싶으므로 <span>을 사용할 수 있습니다.
<div>나는 CSS를 좋아합니다 - <span>52CSS.com</span> W3C 표준</div>
블록 요소는 일반적으로 다른 요소에 대한 컨테이너 요소입니다. 일반적으로 블록 요소는 인라인 요소와 기타 블록 요소를 수용할 수 있습니다. "양식" 블록 요소는 다음과 같습니다. 매우 특별합니다. 다른 블록 요소를 보유하는 데에만 사용할 수 있습니다.
CSS의 도움이 없으면 블록 요소는 한 번에 한 행씩 정렬됩니다. CSS를 사용하면 이 HTML의 기본 레이아웃 모드를 변경하고 원하는 위치에 블록 요소를 배치할 수 있습니다. 매번 어리석게 새로운 줄을 시작하는 대신. 테이블 태그도 일종의 블록 요소라는 점에 유의해야 합니다. 테이블 기반 레이아웃과 CSS 기반 레이아웃은 이 두 레이아웃을 일반 사용자(시각 장애인, 시각 장애인 등 제외)의 관점에서 봅니다. 페이지 로딩 속도 차이 외에는 별 차이가 없습니다. 그러나 일반 사용자가 실수로 페이지 소스코드 보기 버튼을 클릭하게 된다면 둘 사이의 차이는 매우 커질 것입니다. 좋은 재구성 개념을 바탕으로 설계된 CSS 레이아웃 페이지 소스 코드는 최소한 웹 개발 경험이 없는 일반 사용자도 내용을 빠르게 이해할 수 있도록 해줍니다. 이러한 관점에서 CSS 레이아웃 코드는 더 나은 미적 경험을 제공해야 합니다.
블록 컨테이너 요소 div를 상자로 생각하거나 클리핑 작업을 해본 경우 이해하기 더 쉬울 것입니다. 먼저 다양한 신문과 잡지에서 필요한 기사를 잘라냈습니다. 컷된 콘텐츠의 각 조각은 블록입니다. 그런 다음 레이아웃 의도에 따라 이 종이 조각을 새 백지 조각에 붙였습니다. 이것은 당신만의 독특한 초록을 형성할 것입니다. 기술의 확장으로 웹 레이아웃 디자인도 동일한 패턴을 따릅니다. .인라인
요소는 일반적으로 의미 수준의 기본 요소를 기반으로 합니다. 인라인 요소는 텍스트나 기타 인라인 요소만 담을 수 있으며 일반적인 인라인 요소인 "a"는 다음과 같습니다.
블록 요소(block 요소)와 인라인 요소(inline 요소)는 HTML 사양의 개념입니다. 블록 요소와 인라인 요소의 기본적인 차이점은 블록 요소가 일반적으로 새 줄에서 시작된다는 것입니다. CSS 컨트롤이 추가되면 블록 요소와 인라인 요소 간의 이러한 속성 차이는 더 이상 차이가 되지 않습니다. 예를 들어 인라인 요소 cite에 display:block과 같은 속성을 추가하면 매번 새 줄에서 시작하는 속성도 갖게 됩니다.
변경 가능한 요소의 기본 개념은 해당 요소가 컨텍스트에 따라 블록 요소인지 인라인 요소인지 결정해야 한다는 것입니다. 가변 요소는 여전히 위의 두 요소 카테고리에 속합니다. 컨텍스트가 해당 카테고리를 결정하면 블록 요소 또는 인라인 요소의 규칙을 따라야 합니다. 대략적인 요소 분류는 전체 텍스트를 참조하세요.
인라인 요소의 중국어 명칭에는 인라인 요소, 인라인 요소, 인라인 요소, 인라인 요소 등 여러 종류가 있습니다. 기본적으로 통일된 번역이 없으므로 원하는 대로 부르시면 됩니다. 또한, 인라인 요소에 관해 이야기할 때 우리는 display:inline이라는 표시 속성을 생각할 것입니다. 이 속성은 유명한 IE 이중 부동 테두리 문제를 해결할 수 있습니다.
블록 요소
* address - 주소 * 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 - 샘플 컴퓨터 코드 정의 * 선택 - 항목 선택 * 작은 - 작은 글꼴 텍스트 * 범위 - 일반적으로 사용되는 인라인 컨테이너, 텍스트 내의 블록 정의 * 파업 - 밑줄 * 강 - 굵은 강조 * 하위 - 아래 첨자 * sup - 위 첨자 * 텍스트 영역 - 여러 줄의 텍스트 입력 상자 * tt - 텔레타이프 텍스트 * u - 밑줄 * var - 변수 정의
가변 요소 변수 요소는 컨텍스트에 따라 해당 요소가 블록 요소인지 인라인 요소인지를 결정합니다.
* 애플릿 - 자바 애플릿
* 버튼 - 버튼 * del - 텍스트 삭제 * iframe - 인라인 프레임
* ins - 삽입된 텍스트 * 지도 - 이미지 블록(지도)
* 객체 - 객체 객체 * 스크립트 - 클라이언트 스크립트