W3C 박스 모델과 IE 박스 모델의 차이점은 무엇입니까?

예제를 통해 차이점을 살펴보겠습니다.

(권장 학습: css 빠른 시작)

상자 모델은 다음과 같습니다: 여백: 20px, 테두리: 10px, 패딩: 10px; height:50px;

이제 두 상자 모델 아래 상자의 너비와 높이를 계산합니다.

W3C 표준 상자:

상자가 차지하는 공간의 너비와 높이: (브라우저 페이지가 차지하는 공간)

Width = 200 + 10*2 + 10*2 + 20*2 = 280px;

높이 = 50 + 10*2 + 10*2 + 20*2 = 130px;

상자의 실제 너비와 높이:

너비 = 200 + 10*2 + 10*2 = 240px;

Height = 50 + 10* 2 + 10*2 = 90px;

IE 상자:

상자가 차지하는 공간의 너비와 높이: (브라우저 페이지가 차지하는 공간)

Width = 200 + 20*2 = 240px;

Height = 50 + 20*2 = 90px;

상자의 실제 너비와 높이:

Width = 200px;

Height = 50px; 동일한 데이터 내에서 테두리 상자가 내용보다 크다는 것을 데이터에서 알 수 있습니다. - 상자는 작아야 합니다.

디스플레이 효과:

위 내용은 W3C 박스 모델과 IE 박스 모델의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!