Home  >  Article  >  Web Front-end  >  JQuery determines the css box model (Box Model)_jquery

JQuery determines the css box model (Box Model)_jquery

WBOY
WBOYOriginal
2016-05-16 18:36:13939browse

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

Copy code The code is as follows:

{
width:180px;
height: 72px;
padding: 10px;
border-width: 5px; 180*72px. Padding and borders are outside the 180*72 pixel range. 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.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn