JQuery determines the css box model (Box Model)

Everyone who has done front-end settings knows that there are two box models in CSS, the W3C standard box model and the IE browser box model. Most browsers except IE only support the W3C box model. IE browser can use the corresponding box mode according to the definition of the rendering mode of the page. Which rendering mode is used depends on the DOCTYPE declaration on the page.

If the page contains a valid DOCTYPE declaration, it is rendered in strict mode.
If the page has no DOCTYPE declaration or no valid DOCTYPE declaration, it is rendered in compatibility mode.
The following is the difference between the two modes. The main difference between the two rendering modes is the calculation of the width and height styles of the elements. For example, the following style

The code is as follows:

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

In W3C's strict mode, the content display range of the element is 180*72px. Padding and border are outside the range of 180*72 pixels. So the coverage area of ​​the entire element is: width:180 + 10*2 + 5*2 = 210px, height:72 +10*2 + 5*2 =102px.
In IE's compatibility mode, the coverage area of ​​the entire element is 180*72 pixels. The size of the content is reduced to width 180 - 10*2 - 5*2=150px and height 72 - 10*2 - 5*2 =32px.
It is very simple to use JQuery to judge Box Modal. It is passed the $.boxModel flag of type bool. If the page uses the W3C standard model, return true. Otherwise, return false.

The above is the detailed content of JQuery determines the css box model (Box Model). For more information, please follow other related articles on the PHP Chinese website!