W3C standard box model and CSS box model layout classical IE box model (rpm)

Reprinted from: http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html

Box model, there are two, namely, ie box model and standard w3c box model. They differ on interpretation of the box model, take a look at the standard box model we know:

From the range of the standard can be seen in FIG w3c box model includes a margin, border, padding, content, and the content does not include the rest of the part.

　　ie box model

　　Can be seen from the graph range ie box model also comprise different margin, border, padding, content, and the standard w3c box model are: content part ie box model and contains border pading.

　　Example: a box margin is 20px, border of 1px, padding is 10px, content of width 200px, height 50px, if standard w3c box model interpretation This box needs to occupy the position was: width 20 * 2 + 1 * 2 + 10 * 2 + 200 = 262px, high 20 * 2 + 1 * 2 * 10 * 2 + 50 = 112px, the actual size of the box was: width 1 * 2 + 10 * 2 + 200 = 222px, high 1 * 2 + 10 * 2 + 50 = 72px; if use ie box model this box needs to occupy the position as follows: width 20 * 2 + 200 = 240px, high 20 * 2 + 50 = 70px, the actual size of the box was: width 200px, height 50px.

　　That which the box model should you choose? Of course, the "standard w3c box model" was. Considered is how to choose the "Standard w3c box model" mean? It is simply the top of the page plus doctype declaration. If you do not add the doctype, so each browser will be based on their behavior to understand pages that ie browser will use ie box model to explain your box, and ff will use standard w3c box model to explain your box, so pages different browsers will display different. Conversely, if coupled with a doctype declaration, then all browsers will adopt the standard w3c box model to explain your box, you can display the same page in each browser.

　　Examples of jquery do then to confirm it.

< HTML > 
< head > 
< title > box model you use? </ Title > 
< Script Language = "JavaScript" src = "jquery.min.js" > </ Script > 
< Script Language = "JavaScript" > 
    var sbox = $ .boxmodel ?  " Standards the W3C " : " IE " ;
    document.write ( " Your page is currently supported: " + sbox + " box model " );
 </ Script > 
</ head > 
< body > 
</ body > 
</ HTML >

The above code does not add doctype declaration, ie display in the browser "ie box model" to show the "standard w3c box model" in ff browser.

<! DOCTYPE HTML public "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< HTML > 
< head > 
< title > box model you use a standard w3c box model </ title > 
< Script Language = "JavaScript" the src = "jquery.min.js" > </ Script > 
< Script Language = "JavaScript" > 
    var Sbox = $ .boxmodel ?  " standards the W3C " :"ie";
    document.write ( " Your page is currently supported: " + sbox + " box model " );
 </ Script > 
</ head > 
< body > 
</ body > 
</ HTML >

Code 2 with a different code that only the top 1 plus the doctype declaration. Show "Standard w3c box model" in all browsers.

To make the page compatible with various browsers, let us use w3c standard box model.

Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2012/09/15/2686075.html

W3C standard box model and CSS box model layout classical IE box model (rpm)

Guess you like