>웹 프론트엔드 >JS 튜토리얼 >JQuery가 CSS 상자 모델을 결정합니다(Box Model)_jquery

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

WBOY
WBOY원래의
2016-05-16 18:36:13995검색

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

코드 복사 코드는 다음과 같습니다.

{
너비:180px;
높이: 72px;
패딩: 10px;
테두리 너비: 5px; 패딩과 테두리가 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로 줄어듭니다.
JQuery를 사용하여 Box Modal을 판단하는 것은 매우 간단합니다. bool 유형의 $.boxModel 플래그가 전달됩니다. 페이지가 W3C 표준 모델을 사용하는 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.