Home > Developer > JavaScript
Standard W3C box model and IE box model CSS layout classic box model (conversion), w3ccss
W3C box model and IE box model CSS layout classic box model (conversion) the box model is an important concept in css. Only by understanding the box model can the layout be better. In fact, 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 well-known standard box model:
We can see that the range of the standard w3c box model includes margin, border, padding, and content, and the content Part does not contain other parts.
Ie Box Model
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, the margin of a box is 20px, the border is 1px, the padding is 10px, the content is 200px, and the height is 50px. If we use the standard w3c box model, 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, the actual size of the box is: width: 1X2 + 10x2 + 200 = 222px; Height: 1X2 + 10x2 + 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 in order to make the webpage compatible with various browsers, let's use the standard w3c box model.
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
