CSS 레이아웃 및 서식

이 문서는 CSS 레이아웃 및 서식을 설명하여 이전 테이블 기반 방법과 대조합니다. 문서 개체 모델 (DOM)과 CSS 박스 모델에 대한 간단한 설명을 사용하여 브라우저가 웹 페이지를 렌더링하는 방법을 설명합니다. 그런 다음이 기사는 CSS 레이아웃 및 서식에 대한 자주 묻는 질문 (FAQ)에 대한 답변을 제공합니다. CSS1은 제한된 그래픽 레이아웃 기능을 제공했지만 CSS2 및 CSS3은 이러한 기능을 크게 확장하여 레이아웃 테이블과 프리젠 테이션 마크 업에 대한보다 강력한 대안을 제공했습니다. 브라우저는 HTML 문서를 구문 분석 및 렌더링의 두 단계로 렌더링합니다. 구문 분석에는 HTML 마크 업에서 DOM 트리를 만드는 것이 포함됩니다. 이 html 예를 고려하십시오 :

이것은 dom tree (간결성을 위해 생략 된 텍스트 노드)로 번역됩니다.

DOM 트리는 노드 (요소 노드 및 텍스트 노드)로 구성됩니다. 루트 노드 (항상

요소)는

및

로 분기되어 자식 노드로 분기됩니다. 노드 간의 관계에는 부모-자녀, 조상-공인 및 형제 자매가 포함됩니다 DOM 건설 및 CSS 구문 분석 후 렌더링 단계가 시작됩니다. 각 DOM 노드는 하나 이상의 직사각형 CSS 상자 (하위 유형이있는 블록 상자 또는 인라인 상자)로 렌더링됩니다. 사용자 에이전트 스타일 시트는 일반적으로 블록 상자를 블록 레벨 요소에 할당하고 인라인 상자를 인라인 요소에 할당하지만 속성은이를 무시할 수 있습니다. 중요하게도, CSS는 HTML 마크 업을 변경하지 않습니다. 블록/인라인 구별은 HTML DTD에 의해 정의됩니다

<title>Widgets</title><h1>Widgets</h1>
<p>Welcome to Widgets, the number one company in the world for selling widgets!</p>

자주 묻는 질문 :

Q : CSS 레이아웃과 서식의 차이점은 무엇입니까? A : 레이아웃은 페이지 (헤더, 바닥 글, 사이드 바)의 요소 배열 (위치, 크기, 정렬)과 관련이 있습니다. 서식은 시각적 외관 (색상, 글꼴, 배경, 국경, 간격)에 중점을 둡니다.

Q : 응답 형 CSS 레이아웃을 만드는 방법?

a : 미디어 쿼리 (다른 장치의 스타일), 유연한 그리드 기반 레이아웃 (고정 장치 대신 백분율) 및 유연한 이미지/미디어 (상대 단위)를 사용합니다. Q : 다른 CSS 레이아웃 모델은 무엇입니까?

html A : 블록 모델 (블록 레벨 요소), 인라인 모델 (텍스트), 테이블 모델 (테이블 데이터), 위치 모델 (명시 적 위치) 및 플렉스 모델 (Flexible Box 레이아웃). Q : 텍스트 형식에 CSS를 사용하는 방법? head a : 사용 , body,

, , , display 및 색상 속성.

Q : CSS 박스 모델은 무엇입니까? a : 요소 주변의 공간 분포를 설명하는 기본 개념. 각 요소는 내용, 패딩, 테두리 및 마진 레이어로 구성된 직사각형 상자입니다.

Q : CSS와 함께 목록을 작성하는 방법? a : , , , 패딩 및 마진 속성을 사용하십시오

Q : CSS 그리드 및 Flexbox 란 무엇입니까?

list-style-type A : 최신 레이아웃 시스템. 그리드는 2 차원 (행 및 열)이고 Flexbox는 1 차원 (행 또는 열)입니다. 둘 다 반응이 적다. list-style-position Q : CSS와 함께 테이블을 포맷하는 방법? list-style-image

a : 테두리, 패딩, 배경, 및 속성을 ​​사용하십시오 Q : 인라인과 블록 요소의 차이? A : 인라인 요소는 새 선을 시작하지 않으며 필요한 너비 만 차지합니다 (예 : , ). 블록 요소는 새로운 선을 시작하고 전체 너비를 가득 채 웁니다 (예 : , ).

Q : CSS와 링크를 형식화하는 방법?

a : 사용 , , 및 의사 클래스 (, , ).

위 내용은 CSS 레이아웃 및 서식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!