여러 유형의 HTML 상자 모델-HTML 튜토리얼-php.cn

여러 유형의 HTML 상자 모델

WBOY

풀어 주다： 2024-02-19 21:02:06

원래의

518명이 탐색했습니다.

여러 유형의 HTML 상자 모델

HTML 상자 모델에는 표준 상자 모델(콘텐츠 상자 모델)과 IE 상자 모델(테두리 상자 모델)의 두 가지 유형이 있습니다.

표준 박스 모델은 W3C 표준에 규정되어 있으며, 요소의 너비와 높이는 테두리(border)와 패딩(padding)을 제외한 콘텐츠 영역(content)만 포함합니다. 요소의 전체 너비 또는 높이는 콘텐츠 영역의 너비 또는 높이 + 테두리의 너비 또는 높이 + 패딩의 너비 또는 높이와 같습니다.

IE 박스 모델은 초기 Internet Explorer 브라우저에서 제안한 박스 모델로, 표준 박스 모델과 달리 IE 박스 모델에서는 요소의 너비와 높이에 콘텐츠 영역, 테두리, 패딩이 포함됩니다. 요소의 전체 너비 또는 높이는 콘텐츠 영역(테두리 및 패딩 포함)의 너비 또는 높이와 같습니다.

아래에서는 표준 박스 모델과 IE 박스 모델에 대한 구체적인 코드 예제를 각각 제공하겠습니다.

첫 번째는 표준 상자 모델의 코드 예입니다.

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  padding: 10px;
  margin: 20px;
}
</style>
</head>
<body>

<div class="box">
  <p>This is the content of the box.</p>
</div>

</body>
</html>

로그인 후 복사

위 예에서는 <div> 요소를 사용하여 상자를 만듭니다. CSS 스타일을 설정하여 상자의 너비, 높이, 테두리, 패딩 및 여백을 지정합니다. 표준 상자 모델에서 요소의 전체 너비 = 콘텐츠 영역의 너비 + 테두리의 너비 + 패딩의 너비 = 200px + 2px + 20px = 222px 총 높이 = 콘텐츠 영역의 높이 + 테두리 높이 + 패딩 높이 = 100px + 2px + 20px = 122px. <div>元素来创建一个盒子。通过设置CSS样式，我们给盒子指定了宽度、高度、边框、填充和外边距。在标准盒模型中，元素的总宽度=内容区域的宽度 + 边框的宽度 + 填充的宽度 = 200px + 2px + 20px = 222px；总高度=内容区域的高度 + 边框的高度 + 填充的高度 = 100px + 2px + 20px = 122px。

接下来是IE盒模型的代码示例：

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  padding: 10px;
  margin: 20px;
}
</style>
</head>
<body>

<div class="box">
  <p>This is the content of the box.</p>
</div>

</body>
</html>

로그인 후 복사

在IE盒模型中，我们可以通过设置box-sizing: border-box;

다음은 IE 박스 모델의 코드 예시입니다:

rrreee

IE 박스 모델에서는 box-sizing: border-box;를 설정하여 IE 박스 모델을 사용할 수 있습니다. IE 상자 모델에서 요소의 총 너비 = 콘텐츠 영역의 너비 = 200px, 총 높이 = 콘텐츠 영역의 높이 = 100px. 🎜🎜위의 코드 예제를 통해 표준 박스 모델과 IE 박스 모델의 차이점을 명확하게 확인할 수 있습니다. 실제 개발에서는 다양한 요구 사항과 브라우저 호환성을 기반으로 사용할 박스 모델을 선택해야 합니다. 🎜

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