JQuery determines the css Box Model (Box Model)

All those who have done front-end settings know that css has two types of box models, W3C standard box models and IE browser box models. Most browsers except IE only support the W3C box model. The IE browser can use the right box mode according to the definition of the page rendering mode. The Mode in use depends on the DOCTYPE Statement on the page.

If the page contains a valid DOCTYPE declaration, it is displayed in strict mode.

If the page does not have a DOCTYPE declaration or there is no valid DOCTYPE declaration, it is displayed in compatibility mode.

The following describes the differences between the two modes. The main difference between the two modes is the calculation of the element width and height styles. The following style:

Copy to ClipboardReference: [www.bkjia.com] {
Width: 180px;
Height: 72px;
Padding: 10px;
Bording-width: 5px;
}

In W3C strict mode, the content of an element is displayed in the range of 180 * 72px. The padding and border are out of the 180*72 pixel range. Therefore, the covering area of the entire element is: width: 180 + 10*2 + 5*2 = 210px, height: 72 + 10*2 + 5*2 = 102px.

In IE compatibility mode, the entire element covers an area of 180*72 pixels. The content size is reduced to 180-10*2-5*2 = 150px, and the height is 72-10*2-5*2 = 32px.

It's easy to use JQuery to determine Box Modal. Is the $. boxModel flag of the bool type. If the page uses the W3C standard model, true is returned. Otherwise, false is returned.