div+css 박스 모델 지식 요약, div+css 레이아웃을 쉽게 마스터할 수 있음

친구들이 CSS를 처음 배울 때 CSS의 기본, 즉 내부 여백, 테두리, 외부 여백을 처음 배울 때 패딩, 테두리, 여백도 배웠을 것입니다. 그들은 가장 단순한 상자를 형성합니다. 일반적으로 웹 페이지 상단에 doctype 선언을 추가하는 표준 w3c 박스 모델이 사용됩니다. doctype 선언이 추가되었기 때문에 모든 브라우저는 표준 w3c 상자 모델을 사용하여 상자를 해석하고 웹 페이지는 각 브라우저에서 일관되게 표시됩니다. 브라우저 호환성은 매우 친숙합니다. 여기에서는 박스 모델에 대한 관련 지식을 요약합니다.

박스 모델 학습 관련 튜토리얼

1. 먼저 이해하시면 됩니다.관련 html" target="_self">css 상자 모델콘텐츠 소개

스팬>

2. 학습 " target="_self">박스 모델 실습 과정

박스 모델 관련 지식

1. CSS 박스 모델 소개

CSS 정의는 이러한 상자를 설명합니다:

상자 사이의 거리 여백과 위쪽은 3픽셀, 바깥쪽 여백과 왼쪽 및 오른쪽 부분 사이의 거리는 5픽셀이고 바깥쪽 여백과 아래쪽 사이의 거리는 6픽셀입니다.

테두리 너비는 6픽셀입니다. , 테두리 색상은 검은색입니다;

내부 가장자리 위쪽 및 아래쪽 테두리로부터의 거리는 4픽셀이고 왼쪽 및 오른쪽 테두리로부터의 거리는 6픽셀입니다;

CSS 박스 모델 지식 요약

Box Model: Box Model, by 요소 내용, 패딩, 테두리 및 여백의 네 가지 구성 요소가 있으며 이 네 가지 구성 요소에는 위쪽/오른쪽/아래쪽/왼쪽이 포함됩니다. 필요한 크기에 따라 페이지에 요소를 배치할 때 선언된 내부 여백을 추가하세요. , 테두리, 여백 값이 모두 콘텐츠 영역에 추가됩니다. 물론 요소에 패딩, 테두리 또는 여백이 없으면 해당 요소의 크기는 내용에 의해서만 결정됩니다.

3. CSS 상자 모델 그래픽 및 텍스트 설명

CSS 상자 모델은 CSS의 비교적 핵심 개념입니다. 웹 페이지에서 모든 웹 페이지 요소는 상자로 생각할 수 있습니다. 상자는 여백, 테두리, 내부 여백 및 콘텐츠의 네 부분으로 구성됩니다. 그 중 마진(Margins), 테두리(Border), 패딩(Padding)은 요소의 상하좌우에 적용할 수도 있고, 각 면에 적용할 수도 있다. 특히 여백은 음수 값으로 설정할 수도 있습니다. 특별한 경우에는 여백에 음수 값이 필요할 수도 있습니다.

4 . CSS 상자 모델 소개

웹페이지 디자인에서 일반적으로 사용되는 속성 이름은 콘텐츠, 패딩, 테두리 및 여백입니다. CSS 상자 모델에는 모두 이러한 속성이 있습니다. 이러한 성질은 우리 일상생활에서 흔히 볼 수 있는 상자의 성질과 동일합니다. 내용물은 상자 안에 들어 있는 것입니다. 충전재는 상자 내용물의 손상을 방지하기 위해 추가된 내진 재료입니다. 프레임은 상자 자체를 말하며, 이는 일정한 간격이 남아 있어야 함을 의미합니다. 환기를 유지하기 위해 상자 사이.

관련 질문 및 답변

1. 박스 모델에 대해 질문하고 싶으신가요?

2. 아직도 박스 모델을 이해하지 못합니다. 나한테 조언 좀 해줄래?

3. 아직도 박스 모델의 경계가 명확하지 않나요?

【관련 추천】

1. PHP 중국어 웹사이트 무료 튜토리얼: "CSS3 튜토리얼로 빠르게 플레이"

위 내용은 div+css 박스 모델 지식 요약, div+css 레이아웃을 쉽게 마스터할 수 있음의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!