CSS 문서 스트리밍, 블록 레벨 요소 (블록), 인라인 (Inline)은 많은 책을 읽었습니다. Reilly의 <CSS 권한 가이드>에 언급 된 문서 흐름은 저를 매우 민감하게 만들었습니다 이 개념은 정말로 중요합니다. CSS 레이아웃에 대한 많은 이론이 이해하기 쉬워지고 CSS 디자인의 합리성을 이해합니다. 오류가 있으면 순전히 정상입니다. 문서 흐름은 양식을 위에서 아래로 행으로 나누고 각 행의 요소를 왼쪽에서 오른쪽으로 순서대로 배출합니다. 이는 문서 흐름입니다. 이해하지 못하는 몇 가지 질문이 더 있습니다 1. 세 가지 기본 요소 중 하나 인 인라인 요소로서 IT와 블록 수준 요소의 주요 차이점은 무엇입니까? 인라인 요소는 무엇을 의미합니까? 블록 레벨 요소는 무엇입니까? "CSS 권한 가이드"의 중국어 텍스트는 블록 레벨 요소가 아닌 가시 요소가 인라인 요소임을 보여줍니다. 표현의 특성은 "행 레이아웃"의 형태입니다. 여기서 표현식은 항상 행으로 표시됩니다. 예를 들어, 인라인 요소 테두리 바닥 : 1px solid #000;을 설정하면 각 라인에서 반복되며 각 라인 아래에 얇은 검은 색 선이 있습니다. 블록 레벨 요소 인 경우 표시된 검은 선은 블록 아래에만 나타납니다. 간단한 실용적인 예를 알려 드리겠습니다. 예를 들어 <div> 나는 CSS를 좋아합니다 -52css.com </div> 인라인 요소는 일반적으로 의미 론적 기본 요소를 기반으로합니다. 인라인 요소는 텍스트 또는 기타 인라인 요소와 공통 인라인 요소 "A"만 수용 할 수 있습니다. 블록 요소 인라인 요소 변수 요소 변수 요소는 컨텍스트에 기초한 블록 요소 또는 인라인 요소입니다.
비 플로이트 블록 레벨 요소는 한 행을 차지하며, 현재 라인이 수용 할 수없는 경우로드의 한쪽 끝에 부유 한 요소가 부유합니다.
인라인 요소는 또한 단일 행을 차지하지 않습니다 (블록 레벨, 인라인 및 목록 요소 포함)는 하위 요소를 생성 할 수 있습니다.
문서 스트림에서 요소가 존재하게하는 세 가지 상황, 즉 플로팅, 절대 포지셔닝 및 고정 된 위치가 있지만, IE의 문서 스트림에도 부유 한 요소도 존재합니다. .
부동 요소는 정상적인 문서 흐름 공간을 차지하지 않으며 부동 요소의 위치는 일반 문서 흐름을 기반으로 한 다음 문서 흐름에서 추출하여 가능한 한 왼쪽 또는 오른쪽으로 이동합니다. 텍스트 내용은 부동 요소를 둘러싸고 있습니다. 일반 문서 스트림에서 요소가 추출되면 문서 스트림에 여전히 다른 요소가 요소를 무시하고 원래 공간을 채 웁니다.
부동 개념의 근본 원인은 이론에 대한 브라우저의 해석입니다. 많은 사람들이 IE를 표준으로 사용한다고 말할 수는 있지만 그렇지 않습니다.
문서 흐름을 기반으로 다음 위치 지정 패턴을 쉽게 이해할 수 있습니다.
상대 위치, 즉 문서 스트림의 요소 위치에 대한 오프셋.
절대 포지셔닝은 문서 스트림에서 완전히 분리되는 것을 의미하며, 위치 속성 비 정적 값의 가장 가까운 상위 요소, 즉 문서 스트림에서 완전히 분리되며 뷰포트에 비해 오프셋됩니다.
2. 명확한 속성이 올바른 값을 취하는 방법을 이해하는 방법은 실험 상황이 항상 이론과 일치하지 않는 것 같습니다.
p, h1 또는 div와 같은 요소는 종종 블록 레벨 요소라고하며, 이러한 요소는 강력한 컨텐츠로 표시되며 스팬은 인라인 요소라고하며 해당 내용은 라인에 표시됩니다. 즉, "인라인 상자"입니다. (행의 요소를 블록 요소로 변환하기 위해 Display = 블록을 사용할 수 있습니다. Display = 없음 생성 된 요소에 상자가 전혀없고 요소를 표시하지 않으며 문서의 공간을 차지하지 않음을 의미합니다)
A : 라인은 라인 내의 요소이며, 블록 레벨 요소는 정사각형이며 페이지의 어느 곳에도 배치 할 수 있습니다.
B : 라인의 요소는 단어와 같습니다.
C : 단락 <p>, title <h1> <h2>…, List, <ul> <ol> <li>, 테이블 <table>, form <form>, div <div>와 같은 일반 블록 수준 요소 <body>와 같은 신체 요소. 인라인 요소는 다음과 같습니다. 양식 요소 <입력>, 하이퍼 링크 <a>, 이미지 <Img>, <span> .....
D : 블록 수준의 보이지 않는 특징은 각 블록 레벨 요소가 새로운 라인에서 표시되며 후속 보이지 않는 요소도 다른 라인에서 표시해야한다는 것입니다.
e : <span>은 CSS 정의에서 인라인 요소에 속하며 <div>는 블록 레벨 요소입니다.
CSS를 공부 한 사람들에게는 처음에 CSS를 이해할 수 있습니다. 그러나 초보자가 이해하는 것은 쉽지 않으므로 주로 초보자에게 더 친숙한 것으로 설명합니다!
컨테이너라는 단어를 사용하면 자신의 존재와 목적을 쉽게 이해할 수 있습니다. 작은 컨테이너. <span>은 작은 컨테이너입니다. 그러나 잉크를 넣고 싶다면 어떻게해야합니까? 매우 간단합니다. 작은 용기를 꺼내 잉크에 넣고 깨끗한 물에 큰 용기에 넣으십시오.
CSS를 사용하여 문자 C 스타일을 정의하고 <span>을 사용할 수 있습니다.
<div> 나는 CSS를 좋아한다 - <span> 52css.com </span> W3C Standard </div>
블록 요소는 일반적으로 다른 요소의 컨테이너입니다 . 다른 블록 요소를 유지하는 데만 사용될 수 있습니다.
CSS의 효과가 없으면 블록 요소는 매번 줄로 순서대로 배열됩니다. CSS를 사용하면이 HTML의 기본 레이아웃 모드를 변경하고 블록 요소를 원하는 위치에 배치 할 수 있습니다. 매번 어리석게 다른 줄을 시작하는 대신. 테이블 태그는 또한 테이블 기반 레이아웃의 유형이며 CSS 기반 레이아웃은 페이지 로딩을 제외하고는 보통 사용자의 관점에서 볼 수 있습니다. 속도. 차이 외에 다른 차이가 없습니다. 그러나 일반 사용자가 실수로보기 페이지 소스 코드 버튼을 클릭하면 둘 사이의 차이가 매우 커집니다. 우수한 재구성 개념을 기반으로 설계된 CSS 레이아웃 페이지의 소스 코드는 웹 개발이없는 일반 사용자가 컨텐츠를 빠르게 이해할 수 있도록 할 수 있습니다. 이러한 관점에서 CSS 레이아웃 코드는 더 나은 미적 경험을 가져야합니다.
블록 컨테이너 요소 div를 상자로 상상하거나 클립 온 기사와 함께 연주 한 경우 이해하기가 더 쉬울 것입니다. 우리는 먼저 다양한 신문과 잡지에서 필요한 기사를 잘라냅니다. 각 조각 컷은 블록입니다. 그런 다음 우리는이 종이 조각을 우리 자신의 레이아웃 의도에 따라 빈 새 종이에 다시 스틱합니다. 이것은 당신 자신의 독특한 다이제스트 뉴스를 형성합니다. 기술의 확장으로 웹 레이아웃 디자인은 동일한 패턴을 따릅니다. .
블록 요소 및 인라인 요소는 HTML 사양의 개념입니다. 블록 요소와 인라인 요소의 기본 차이점은 블록 요소가 일반적으로 새로운 라인으로 시작한다는 것입니다. 그러나 CSS 컨트롤이 추가되면 블록 요소와 인라인 요소 간의 속성 차이는 차이가되지 않습니다. 예를 들어, 디스플레이에 인라인 요소 인용을 추가 할 수 있습니다. 블록 속성에 매번 새로운 라인에서 시작하는 속성을 가질 수 있습니다.
변수 요소의 기본 개념은 요소가 맥락 관계에 기초한 블록 요소인지 또는 인라인 요소인지 여부를 결정해야한다는 것입니다. 변수 요소는 여전히 위의 두 요소 범주에 속합니다. 맥락 관계가 해당 범주를 결정하면 블록 요소 또는 인라인 요소의 규칙과 제한을 따라야합니다. 일반 요소 분류는 전체 텍스트를 참조하십시오.
인라인 요소의 중국 이름과 관련하여 많은 인라인 요소, 임베디드 요소, 인라인 요소 및 직접 입력 요소가 많이 있습니다. 기본적으로 통일 된 번역은 없으며 원하는대로 부르십시오. 또한 인라인 요소와 관련하여 디스플레이 속성이 있다고 생각합니다.
* 주소 - 주소 * 블록 쿼트 - 블록 참조 * 센터 - 리프팅 * dir- 디렉토리 목록 * div- 일반적으로 사용되는 블록 레벨은 쉽고 CSS 레이아웃의 기본 태그이기도합니다. 그룹* 양식 - 상호 작용 양식* 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- 컴퓨터 코드 예제 정의 * 선택 - 프로젝트 선택 * 작은 - 작은 글꼴 텍스트 * 스팬 - 일반적으로 사용되는 인라인 컨테이너, 텍스트 내에서 블록을 정의합니다 * 스트라이크 - 중간 점수 * 강조 * 서브 스크립트 * SUPERSCRIPT * Textarea- 멀티 라인 텍스트 입력 상자 * TT- Teletext * u- 밑줄 * var- 변수 정의
* 애플릿 - 자바 애플릿
* 버튼 - 버튼 * 델 - 텍스트 삭제 * iframe- 인라인 프레임
* INS- 삽입 된 텍스트* 맵 - 그림 블록 (지도)
* 개체 - 객체 객체* 스크립트 - 클라이언트 스크립트