1.Summary

1.1Preface

cssThe properties of the box model are:Content (content), fill (padding), border (border), boundary (margin)；The box that we see in our daily life is also a kind of box that can hold things. It also has these attributes, so we use the box pattern to understand.

The box in life shows:

Content (content): something in a box.

Padding: Foam or other earthquake-resistant additives added to a box for fear of damage to its contents.

The border (border): the box itself.

Margin: The boxes can’t all be stacked together, leaving some space for ventilation, but also for easy removal.

The box in the web page explains:

Content (content): text, pictures and other elements.You can’t put anything in a picture. It’s its own content, so it’s not a box.)，It can also be a small box (DIV nesting).

Fill (padding): pixel fill is optional.

Border (border): pixel display is dispensable.

Boundary (margin): pixel filling is dispensable.

The difference between the two boxes: in life, the box should not be bigger than the box, otherwise the box will be broken. And the CSS box is resilient, and the things inside are bigger than the box itself, but it doesn’t break.

1.2 Composition structure

 Take the box model in Chrome browser as an example:

content：The location of the content area, text, and picture. The area directly affected by width and height attributes in CSS.

padding：The inner margin area exists between content and border. The properties of CSS can be padding-top, padding-right, padding-bottom, padding-left and pad.Ding.

border：A border region exists between padding and margin. In the default layout, the width of the border is set to 0, so that the borders of the elements are not displayed.

margin：The outer margin area controls the distance between other elements and the margins of the current element. The properties of CSS can be margin-top, margin-right, margin-bottom, margin-left and margin.

1.2.1 Examples

Explain:The width of the pattern and the width of the real possession are not the same content.。

2.Box model

The difference between standard box model and IE box model shows that:

• In the CSS box model (Box Model), the attributes are:Content (content), inner margin (padding), border (border), outer margin (margin)
• In CSSStandard box modelIn the middle,widthAnd height refer to the width and height of the content area.。Increasing the inner margin, border, and outer margin does not affect the size of the content area, but increases the overall size of the element box.IEBox modelIn the middle,widthAnd height refer to content area + border (left or right sides) and inner margin (left or right sides).The width and height.  

2.1 Standard box model

2.2 IEBox model

2.3 Box description [standard box model]

Content:width、height

Box samples (true occupancy height and height are: 302*302):

.box1{
        width: 100px;
        height: 100px;
        padding: 100px;
        border: 1px solid red;
   }
/*The true occupancy width of the box = left border + left padding + width + right padding + right border box true occupancy height = upper border + upper padding + height +Lower padding + lower border*/
.box2{
        width: 250px;
        height: 250px;
        padding: 25px;
        border: 1px solid red;
    }

Box model:

Summary:

If you want to keep the true height and width of a box, add width / height and subtract the corresponding padding. When you add padding, you need to reduce the corresponding width/height.Because boxes are fat and disastrous, they push other boxes down.。

3.Width and height of elements

By default, the width and height attributes in CSS refer to the width of the content content area.

In DOM, the acquisition of element height and width has the following attributes: clientWidth / clientHeight, offsetWidth / offsetHeight, scrollWidth / scrollHeight.

3.1 clientWidth、clientHeight

Explain:The width and height of the visual area of the object’s content, including the inner margin, the width and height of the content area, and the edges such as scrollbars are not packaged.

Formula:

element.clientWidth = padding-left + width + padding-right
element.clientHeight = padding-top + height + padding-bottom

Examples:

3.2 offsetWidth、offsetHeight

Explain:The actual width and height of the whole object, including the width and height of the border, inner margin, content area and scroll bar, etc.

Formula:

element.offsetWidth = border-left + padding-left + width + padding-right + border-right
element.offsetHeight = border-top + padding-top + height + padding-bottom + border-bottom

 Examples:

3.3 scrollWidth、scrollHeight

Explain：Similar to clientWidth and clientHeight (including inner margins, content areas, but excluding scrollbars), scrollWidth and scrollHeight are closely related to the element’s overflow style attributes:

When the content of a block-level element exceeds the size of the element, the contents of the block-level element appear scroll bars or content overflows according to the value set by overflow, and scrollWidth and scrollHeight contain these invisible content areas.

Examples:

4. box-sizing

By default, the values of the width and height attributes in CSS apply only to the content (content area) of the element, and the box-sizing attribute modifies this default range.

box-sizingThe value ofcontent-box(Default value and sumborder-box。

4.1 box-sizing:content-box

Explain：The values of width and height attributes in CSS are only applied to the content area of the element.

If the width of an element is set to 200px, the content area width of this element is only 200px.

4.2 box-sizing:border-box

Explain：The border and inner margin of the element are contained in width and height in CSS.

If you set the width of an element to 200 px, the width of the element content area = 200-border-padding.

5. jQueryWidth of element (height)

jQueryThe following methods for obtaining the width of elements are provided:

$(element).width()：Gets the width of the element content (content) area. If the element contains box-sizing: border-box ，It will subtract the corresponding padding and boder.

$(element).innerWidth()：Gets the width of the element content area + padding.

$(element).outerWidth()：Gets the width of the element content region + padding + boder.

$(element).outerWidth(true)：Gets the width of the element content region + padding + boder + margin.

Example diagram：