Box model, Boxmodel

Box model, Boxmodel

Css is being studied recently ~ After setting the width of an element ~ Sometimes it also sets the padding, margin, and border values for him,

Every time I think about it, will the width of this element change? js gets the width of the element, which width () refers to, and innerWidth ()? OuterWidth ()? OuterWidth (true )?

In CSS, the Box model is divided into two types. The first is the W3C standard model, and the other is the traditional IE model.

They all share the same dimension model for the element. Specifically, they are used to calculate the width, height, padding, border, and actual size of the element. What are their differences?
Various problems are entangled. To solve this problem, I made the following debugging:

Test environment: ie6 ie7 ie8 chrome firefox

As the saying goes (set by yourself): element: In this example, the div [class = 'Con '] content width: Content in the element. In this example, "get a train ticket "~ The most crazy thing about the company recently ~~ (Too many rows)

/****** A very simple demo *********/
<Style> * {margin: 0; padding: 0 }. con {width: 300px; height: 200px; margin: 0 auto; background: # 6c6eff; padding: 50px; margin-top: 10px; border: 4px # FFFF00 dashed }. log {width: 300px; border: 1px red solid; height: 100px; margin: 0 auto} </style> <script >$ (function () {var ss = []; ss. push ("width:"); ss. push ($ (". con "). width () + "<br>"); ss. push ("innerWidth:" + $ (". con "). innerWidth () + "<br>"); ss. push ("outerWidth:" + $ (". con "). outerWidth () + "<br>"); ss. push ("outerWidth (true):" + $ (". con "). outerWidth (true); $ (". log "cmd.html (ss. join (""))}) </script> 
Conclusion:
　　　1: Google is also available in ie6 and ie6 versions. Firefox adopts the w3c box model. It is estimated that only ie6 and earlier versions follow the traditional box model ~

Ps: What is the w3c box model? Let me explain it with my personal understanding.
Con: 300px; padding: 50px; margin-top: 10px; border-width: 4px;
The actual display width of the con page is: 300 + 50*2 + 4*2 = 408
I think you should have understood that width (PX) refers to the content width. When you set the padding value, conOutward expansionThe same is true for setting the border width;
　　　　　  
$ (". Con "). width (): Px. In fact, we often talk about the width of con. I think this is a bit of a misunderstanding. It should be said that the content width of this element is correct.
$ (". Con"). innerWidth (): 400px; Content width of the element + inner distance padding Value
$ (". Con "). outerWidth (): 408px; Content width of the element + inner distance padding value + boderWidth of the border. This is the width of the element. What do you think?

$ (". Con "). outerWidth (true): The content width of the element, the padding value, the boderWidth of the border, and the margin value (valid only in chrome). The value is the same as that in other browsers;
　　　　
Matching diagram:
Ie6 ie7 ie8 firefox

                 chrome:


　　
　　　　2:Differences between ie and firefox debugging tools
Let's look at the illustration ~ Sometimes I will confuse it. ie's 408 actually refers to outerWidth, not the width of the box in it. The one in it is 300.
Ie:

          firefox:

            
　　　　　　               
　　　　　　　
　　　　　　
I finally figured it out. Although it was very simple, I used to listen to others. I thought it was very troublesome. It turned out to be okay.
The most important thing to learn about css is compatibility. I will summarize some of the compatibility problems I have encountered in the future.
I must master css + div ~!