JQuery는 CSS 상자 모델(Box Model)을 결정합니다.

프런트 엔드 설정을 해본 사람이라면 CSS에 W3C 표준 박스 모델과 IE 브라우저박스 모델이라는 두 가지 박스 모델이 있다는 것을 알고 있습니다. IE를 제외한 대부분의 브라우저는 W3C 박스 모델만 지원합니다. IE 브라우저는 페이지의 렌더링 모드 정의에 따라 해당 상자 모드를 사용할 수 있습니다. 사용되는 렌더링 모드는 페이지의 DOCTYPE 선언에 따라 다릅니다.

페이지에 유효한 DOCTYPE 선언이 포함되어 있으면 엄격 모드로 렌더링됩니다.

페이지에 DOCTYPE 선언이 없거나 유효한 DOCTYPE 선언이 없으면 호환 모드에서 렌더링됩니다.

다음은 두 모드의 차이점입니다. 두 렌더링 모드의 주요 차이점은 요소 너비와 높이 스타일 계산입니다. 다음과 같은 스타일

{

　 width:180px;

　 height: 72px;

　 padding: 10px 모드에서 표시되는 범위는 180*72px입니다.

Padding

및 테두리가 180*72픽셀 범위를 벗어났습니다. 따라서 전체 요소의 적용 범위는 너비:180 + 10*2 + 5*2 = 210px, 높이:72 +10*2 + 5*2 =102px입니다.

IE의 호환 모드에서 전체 요소의 적용 범위는 180*72픽셀입니다. 콘텐츠 크기는 너비 180 - 10*2 - 5*2=150px, 높이 72 - 10*2 - 5*2 =32px로 줄어듭니다.

Box Modal을 판단하기 위해 JQuery를 사용하는 것은 매우 간단합니다. bool 유형의 $.boxModel 플래그가 전달됩니다. 페이지가 W3C 표준 모델을 사용하는 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.

위 내용은 JQuery는 CSS 상자 모델(Box Model)을 결정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!