There are two types of box models: the IE box model and the standard W3C box model. Their interpretation of the box model is different,
Let's take a look at the familiar standard box model:
Can't see the picture clearly? Click here to view the source image (large image ).
See the StandardThe W3C box model has the following scopes: margin, border, padding, and content, and the content Part does not contain other parts.
Can't see the picture clearly? Click here to view the source image (large image ).
We can see that the IE box model also has the range of margin, border, padding, and content. Unlike the standard W3C box model, the content part of the IE box model contains border and pading.
For example, if the margin of a box is 20px, border is 1px, padding is 10px, content is 200px, and height is 50px, the location of the box is: width: 20*2 + 1*2 + 10*2 + 200 = 262px, height: 20*2 + 1*2*10*2 + 50 = pixel PX, actual box Size Is: width 1*2 + 10*2 + 200 = 222px, height 1*2 + 10*2 + 50 = 72px; if the IE box model is used, the location of the box is 20*2 + 200 = 240px, 20*2 + 50 = 70px, and the actual size of the box is Px in width and 50px in height.
Which box model should be selected? Of course it's the standard W3C box model. How can we choose the "Standard W3C Box Model? Simply add the DOCTYPE statement to the top of the webpage. If the DOCTYPE statement is not added, Each browser will understand the webpage based on its own behavior, that is, IE will use the IE box model to explain your box, FF will use the standard W3C box model to explain your box, so the web page will be displayed differently in different browsers. Otherwise, if the DOCTYPE statement is added, all browsers will use the standard W3C box model to explain your box, and the web page will be consistent in each browser.
Let's use the jQuery example to confirm it.
Code 1:
<Html>
<Head>
<Title> what is the box model you use? </Title>
<Script language = "javascript" src = "jquery. min. js"> </script>
<Script language = "javascript">
Var sBox = $. boxModel? "Standard W3C": "IE ";
Document. write ("your page currently supports:" + sBox + "Box Model ");
</Script>
</Head>
<Body>
</Body>
</Html>
The preceding Code does not contain the DOCTYPE statement. The "IE Box Model" is displayed in the IE browser, and the "Standard W3C Box Model" is displayed in the FF browser ".
Code 2:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html>
<Head>
<Title> the box model you use is a standard W3C Box Model </title>
<Script language = "javascript" src = "jquery. min. js"> </script>
<Script language = "javascript">
Var sBox = $. boxModel? "Standard W3C": "IE ";
Document. write ("your page currently supports:" + sBox + "Box Model ");
</Script>
</Head>
<Body>
</Body>
</Html>
The only difference between Code 2 and code 1 is that the DOCTYPE declaration is added at the top. The standard W3C box model is displayed in all browsers ".
So to make the webpage compatible with various browsers, let's use the standard W3C Box Model
Address: http://www.cnblogs.com/releaseyou/archive/2009/04/16/1437456.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
