CSS box model (GO)

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

Box model is an important concept in CSS, understanding the box model to better layout. In fact, there are two kinds of box model, namely, IE box model and standard box model. They have different interpretations of the box model, let's take a look at our familiar standard box model:

The scope of the standard box model can be seen, including margin, border, padding, content, and the Content section does not contain other parts.

IE Box model

The scope of the IE box model can be seen also includes margin, border, padding, content, and the standard box model is different: the content portion of the IE box model contains border and pading.

Example: A box margin of 20px,border for the 1px,padding for the 10px,content width of 200px, high 50px, if the standard box model interpretation, then the box needs to occupy the position of: width 20*2+1*2+10* 2+200=262px, High 20*2+1*2*10*2+50=112px, the actual size of the box is: Wide 1*2+10*2+200=222px, high 1*2+10*2+50=72px; If you use the IE box model, the box needs to occupy the position: wide 20*2+200=240px, High 20*2+50=70px, the actual size of the box is: Width 200px, high 50px.

Which box model should we choose? Of course, the "standard box model". What is the choice of "standard box model"? It's easy to add a DOCTYPE statement at the top of the page. If you do not add DOCTYPE statement, then each browser will be based on their own behavior to understand the Web page, ie browser will use the IE box model to explain your box, and FF will use the standard box model to explain your box, so the page in different browsers will show the difference. Conversely, if you add the DOCTYPE statement, then all browsers will use the standard box model to explain your box, the Web page can be displayed in each browser consistent.

Then use the example of jquery to confirm it.

Code Listing 1:



<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "标准w3c":"ie";
document.write("您的页面目前支持："+sbox+"盒子模型");
</script>

<body>
</body>


The above code does not add the DOCTYPE declaration, in IE browser display "IE box model", in the FF browser display "standard box model".

Code Listing 2:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">


<title>你用的盒子模型是标准w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "标准w3c":"ie";
document.write("您的页面目前支持："+sbox+"盒子模型");
</script>

<body>
</body>


The only difference between code 2 and code 1 is that the DOCTYPE declaration is added to the top. "Standard box Model" is displayed in all browsers.

So in order for the Web to be compatible with each browser, let's use the standard box model.

CSS box model (GO)