CSS의 상자 모델

1. CSS 상자 모델 개요

기본적으로 CSS의 모든 요소는 상자로 둘러싸여 있습니다. 이 상자는 상자의 크기(너비 및 높이: 너비 및 높이), 패딩, 테두리 및 여백을 포함하도록 중심에서 바깥쪽으로 확장되는 요소 상자의 처리를 지정합니다. CSS 상자 모델 개략도는 다음과 같습니다.

2, CSS 상자 모델의 구체적인 설명:

개략도에 표시된 대로 다음에서 사용되는 영역 실제 콘텐츠로 상자 모델의 너비와 높이로 지정된 실제 콘텐츠는

패딩 영역에 표시될 수 있습니다. 패딩과 경계를 이루는 가장자리 테두리(boader); 테두리 외부는 외부 여백(margin)이며, 외부 여백은 기본적으로 투명합니다. 즉, 상자의 배경색이나 배경 이미지가 외부 여백에 표시되지 않습니다. 후속 요소를 차단하지 않지만 상위 요소의 콘텐츠를 볼 수 있습니다.

3. CSS 상자 모델 테스트:

1. 기본 HTML 코드:

페이지에 DIV 블록을 설정하고 이를 테스트 상자 개체로 사용하면 됩니다. 200픽셀 이미지는 DIV 블록의 내용으로 사용됩니다.




br/> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

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