HTML box model &jquery box model

After learning the box model of jquery Recently, I felt like I was really subverting my previous view of the box model, and when I first thought that the box model existed only in HTML, we came to see what the difference was.

1.html Box Model

If everything in JS is an object, everything inside the HTML is a box. It's not a box. We can also use Dispiay:blok to turn into boxes. How did he calculate the box?

The httml element has an attribute Box-sizing:border-box/content-box;

By default, the Content-box content box is the case of the wide-height method

Actual width (width) = defined width (width) + inner margin (padding) +border;

The actual height (height) = defined width (width) + padding (padding) +border;

Border-box, also called Weird box, where is he weird, look down

The wide-height method of the weird box

Actual height (width) = width defined (width) but here (it contains padding and borders, so the actual content inside it is its actual width minus the padding minus the border)

Actual High Ibid.

Understand: I understand that you set an element into a content box, and then add an inner margin or border to it, it will press the content part inward and give you the padding or border, so it doesn't change the defined width.

2.jquery Box Model

1.width ()/request is the width of its own definition, high ibid.

2.innerWidth () asks for its own defined width plus the inner margin

3.outerWidth () The width plus the inner margin plus the border

4.outerWidth (True) to define the width plus the padding, plus the border plus the margin

The output is 100 140 144 244, respectively.

Browser's four height: https://www.cnblogs.com/heaventear/archive/2013/04/05/3000364.html

HTML box model &jquery box model