[NET Abstract] DIV + CSS two box models

Source: Internet
Author: User
It is logical to use CSS to layout the page layout DIV!
Focus on understanding the box model, Standard The difference between a stream and a non-standard stream is also the positioning principle! It's very easy to break these three! Multi-practice and multi-reference!
Finally, there is a compatibility problem. In practice, we naturally have experience! These compatibility skills come from experience!

 

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.