차이점: 1. 표준 상자의 너비와 높이는 콘텐츠 영역의 너비와 높이인 반면 이상한 모델의 너비와 높이는 "콘텐츠 영역 + 테두리 + 패딩"의 너비와 높이를 나타냅니다. 2. 표준 상자는 패딩, 테두리 및 여백을 추가하지만 이상한 모델은 요소의 크기에 영향을 주지 않습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
상자 모델에는 콘텐츠, 패딩, 테두리 및 여백이 포함됩니다.
CSS에는 W3C 표준 모델과 IE 이상한 모델이라는 두 가지 상자 모델이 있습니다.
소개:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>문서의 구문 분석 유형을 선언하는데 이것이 얼마나 중요합니까?
구문 분석 유형:
BackCompat: 이상한 모드, 브라우저 자체 모드
CSS1Compat: 표준 모드, W3C 표준 렌더링 페이지를 분석합니다
선언하지 않으면 이상한 모드에 따라 렌더링됩니다. 브라우저마다 렌더링이 다릅니다
1. 표준 모델
W3C 표준 모델
요소를 설정할 때 너비와 높이의 경우 표준 상자 모델은 콘텐츠(파란색 부분)의 너비와 높이만 설정하므로 이 요소의 실제 너비와 높이는 패딩(내부 여백) 테두리(테두리) 여백도 추가해야 합니다. ( 여백).
공식:
width = 콘텐츠 너비
height = 콘텐츠 높이
2. 이상한 모델
이상한 모델
요소는 너비와 높이가 다른 이상한 상자 모델은 전체 상자를 전체적으로 취급합니다. 전체 상자에 너비와 높이를 지정합니다. 상자에 추가 여백과 테두리도 설정하는 경우. 그러면 가운데 내용물의 파란색 부분이 눌려 작아지게 됩니다.
공식:
width = 테두리 + 패딩 + 콘텐츠 너비
height = 테두리 + 패딩 + 콘텐츠 높이
W3C 표준 모델과 IE 이상한 모델의 주요 차이점은 너비입니다. 상자 높이.
①표준 상자의 너비와 높이는 내용의 너비와 높이를 나타냅니다. 너비=내용 너비, 높이=내용 높이입니다. 내부 여백, 테두리 및 외부 여백을 늘려도 콘텐츠 영역의 크기에는 영향을 미치지 않습니다. , 그러나 요소 상자의 전체 크기가 증가합니다.
②이상한 상자의 너비에는 패딩, 콘텐츠 너비 및 테두리가 포함됩니다. height에는 콘텐츠의 높이, 테두리 및 패딩이 포함됩니다.
width=(border-left+padding-left+콘텐츠의 너비+padding+right+border+right)
height=(border-top+padding-top +콘텐츠 높이+패딩 -하단+테두리-하단)
요약:
1. 표준 박스 모델: 콘텐츠의 크기만 설정합니다. IE 박스 모델: 전체 요소를 전체 세트 크기로 처리합니다.
2. CSS의 박스 모델은 콘텐츠, 패딩, 테두리, 여백으로 구성됩니다. 하지만 상자의 크기는 여백 없이 내용+패딩+테두리로 결정됩니다.
3. 페이지 코드를 작성할 때(DOCTYPE 유형은 페이지에서 선언되어야 함) 표준 W3C 모델을 사용하여 동일한 페이지에서 여러 브라우저 간의 비호환성을 방지해야 합니다.
DOCTYPE 유형이 선언되지 않으면 IE 브라우저는 박스 모델을 IE 박스 모델로 해석하고 FireFox는 이를 W3C 박스 모델로 해석하기 때문에 페이지에 DOCTYPE 유형이 선언되면 모든 브라우저가 해석합니다. 박스 모델 W3C 박스 모델로 해석됩니다.
(학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드)
위 내용은 CSS3의 두 상자 모델의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
