CSS 상자 모델 이해: 5분 안에 CSS 상자 모델이 무엇인지 이해하시겠습니까?

CSS 박스 모델이 무엇인가요? 결국 CSS를 배우다 보면 CSS 박스 모델을 자주 보게 되기 때문에 다음 글에서는 PHP 중국 웹사이트에서 CSS 박스 모델의 개념과 CSS 박스 모델에 대한 이해에 대해 이야기해보겠습니다.

우선 CSS 박스 모델이 무엇인지 살펴볼까요?

바이두 백과사전을 보면 웹 디자인에서 자주 듣는 속성 이름인 content, padding, border, margin, CSS box mode가 모두 이러한 속성을 가지고 있음을 알 수 있습니다. 우리가 일상에서 보는 상자는 물건을 담을 수 있는 상자이고, 이런 속성도 갖고 있어서 상자모형이라고 합니다. 아래와 같이:

CSS 박스 모델은 웹 디자인에서 자주 사용되는 CSS 기술에서 사용되는 사고 모델입니다.

그럼 CSS 박스 모델이 무엇인지 알았으니 CSS 박스 모델을 어떻게 이해해야 할까요?

CSS 박스 모델의 이해

CSS 박스 모델을 일상생활의 박스로 이해할 수 있습니다.

내용은 상자에 담긴 내용입니다. 그림, 텍스트 또는 작은 상자 중첩이 가능합니다. 실제로는 내용이 상자보다 클 수 없습니다. 상자보다 크면 상자가 터지지만 CSS에서는 상자가 탄력적입니다. 내용이 너무 크면 상자가 늘어나지만 상자가 손상되지는 않습니다.

패딩은 상자 안의 물건이 손상되지 않도록 폼이나 플라스틱 필름 등으로 채우는 것과 마찬가지로 크거나 작거나 부드러울 수 있습니다. 혹은 하드하고 반응은 입니다. 웹페이지는 패딩의 크기입니다.

border는 외부 테두리입니다. 테두리에는 상자의 두께와 색상 또는 재질과 동일한 크기 및 색상 속성이 있기 때문입니다.

margin 바깥쪽 여백은 우리 상자와 다른 상자 또는 다른 물건 사이의 거리입니다. 상자가 많은 경우 마진은 상자 사이의 직접적인 거리로 통풍, 미관 및 쉬운 제거가 가능합니다.

CSS 박스 모델에는 두 가지 종류가 있는데, 하나는 표준 모델인 W3C 박스 모델이고, 다른 하나는 IE 박스 모델입니다

css 설정 방법 두 개의 상자 모델 위로:

/* 标准模型 */
box-sizing:content-box; 
/*IE模型*/
box-sizing:border-box;

두 개의 CSS 상자 모델은 다음 그림으로 표현될 수 있습니다:

표준 모델:

#🎜🎜 ##🎜 🎜#IE 박스 모델:

위 그림에서 IE 박스의 너비나 높이를 확실히 알 수 있습니다. 모델은 콘텐츠(content) 너비와 높이, W3C 박스 모델의 너비나 높이, 즉 표준 모델은 콘텐츠(content) + 패딩(inner margin) + 테두리(border)

#🎜🎜 # 예를 들어보겠습니다: div의 너비와 높이 높이는 105px, 패딩은 10px, 테두리는 5px, 여백은 30px입니다. W3C 상자 모델(여백, 테두리, 패딩 및 콘텐츠 포함) 아래에 표시되는 div의 총 너비와 총 높이는 105입니다. + 15 + 5 + 30 = 155px IE 박스 모델 아래에 표시되는 div가 차지하는 전체 너비와 전체 높이(여백, 테두리, 패딩 및 콘텐츠 포함)는 105+ 30 = 135px입니다.

<style>
  .content {background: #eee; height: auto;border: 1px solid black;}
  .div {width: 105px;height: 105px;margin: 30px;padding: 15px;border: 5px solid black;}
  .div-01 {background: green;}
  .div-02 {background: pink;box-sizing: border-box;}
</style>
<div class="content">
  <div class="div div-01">W3C盒模型</div>
  <div class="div div-02">IE盒模型</div>
</div>

효과는 다음과 같습니다:

명백한 차이점은 요소의 너비가 (너비)가 확실합니다. 이 경우 W3C 박스 모델의 너비에는 패딩과 테두리가 포함되지 않지만 IE 박스 모델은 포함됩니다.

물론, 이것을 보고 CSS 박스 모델의 내용을 완전히 파악해서는 안 됩니다. 다음으로

css 비디오 튜토리얼

을 확인해 보세요. PHP 중국어 웹사이트의 열과 css3 비디오 튜토리얼 열에 포함된 비디오는 CSS3 상자 모델에 대해 매우 자세히 설명되어 있습니다. 관련 추천:

CSS 박스 모델 소개

CSS 박스 모델에 대해 이야기해보자_html / css_WEB-ITnose

위 내용은 CSS 상자 모델 이해: 5분 안에 CSS 상자 모델이 무엇인지 이해하시겠습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!