CSS의 Box Model의 여백 그래픽 및 텍스트에 대한 자세한 설명

상자 모델은 다음 CSS 속성으로 구성됩니다.

0. 콘텐츠
1.padding 패딩
2.border border
3.margin margin
점선은 박스 모델에 속하지 않으며 범위를 식별하는 데 사용되는 가장 일반적인 예입니다.

<p class="box"></p>   
<style type="text/css">   
    .box {   
        width: 200px;   
        height: 200px;   
        background-color: green;   
        padding: 20px;   
        border: 5px solid red;   
        margin: 50px;   
    }   
</style>

명시적 효과:

Chrome(Ctrl + Shift + j) 또는 Firefox의 Firebug를 사용할 수 있습니다. 박스 모델을 볼 수 있는 개발자 도구:

검은색 박스 실선과 가장 바깥쪽 점선은 식별용이지 설정된 스타일이 아닙니다. :

p의 콘텐츠 너비와 높이가 모두 200px임을 알 수 있습니다. 블록 또는 인라인 상자 요소에 패딩을 설정하면 일부 CSS 요소에 영향을 줍니다. 배경은 패딩에도 명시적으로 표시됩니다.
빨간색은 테두리이며 테두리 요소는 요소 콘텐츠에 포함되지 않으므로 배경 등을 얻을 수 있는 방법이 없습니다.
여백 요소는 일반적으로 보이지 않으며 색상을 설정할 수 없습니다. 여백은 다른 요소와 어느 정도 거리를 두는 데 사용되는 경우가 많습니다.
DOM을 통해 테두리 크기를 변경하거나 명시적인 테두리를 변경하면 요소의 크기가 변경되어 레이아웃이 중단될 수 있습니다. CSS에도 속성 개요가 있으며 이 속성은 테두리와 유사할 수도 있습니다. 테두리로 사용되지만, 테두리와는 다릅니다. 테두리와 다른 점은 콘텐츠에 그려지며 상자 크기를 변경하지 않는다는 점입니다. IE7 이하 버전에서는 아웃라인을 지원하지 않습니다.

외부 데이터 오버레이
박스 모델의 또 다른 특별한 점은 인접한 외부 데이터가 만나면 겹쳐지고 가장 큰 것이 최종이 된다는 것입니다. 외부 데이터.

위 내용은 CSS의 Box Model의 여백 그래픽 및 텍스트에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!