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

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

페이지에 유효한 DOCTYPE 선언이 포함되어 있으면 엄격 모드로 렌더링됩니다.
페이지에 DOCTYPE 선언이 없거나 유효한 DOCTYPE 선언이 없으면 호환 모드에서 렌더링됩니다.
다음은 두 모드의 차이점입니다. 두 렌더링 모드의 주요 차이점은 요소 너비와 높이 스타일 계산입니다. 예를 들어, 다음 스타일은

코드는 다음과 같습니다.

{ 
　　width:180px; 
　　height:72px; 
　　
padding
:10px; 
　　bording-width:5px; 
}

W3C의 엄격 모드에서 요소의 콘텐츠 표시 범위는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!