CSS Box Model Box models

1. Overview 1.1 Preface

CSS box models have properties such as content, padding (padding), Borders (border), borders (margin), and the boxes that are seen in everyday life, which can also be used as a box for things, have these properties, so they are understood in box mode.

Description of the box in life:

Content: Something in a box.

Padding (padding): A foam or other anti-seismic accessory that is added to the damage of the contents of the box (valuables).

Border (border): the box itself.

Margin: When the box is placed, it cannot be stacked together, leaving some space for ventilation, and also for easy removal.

Description of the box in the Web page:

Content: Text, pictures and other elements ( a picture can not put things, it is their own content, it is not a box ), can also be a small box (div nested).

Fill (padding): Pixel fill, optional.

Border (border): pixel display, optional.

Boundary (margin): pixel padding, optional.

The difference between the two boxes: the box in life is generally not bigger than the box, otherwise the box will be broken. The CSS box is resilient, and the inside is bigger than the box itself, but it doesn't get damaged.

1.2 Composition Structure

Take the example of a box model in the Chrome browser:

Content: The location where text and pictures appear. The area where the width and height properties of the CSS function directly.

padding: The area of the inner margin that exists between the content and the border. The properties that can be used with CSS are padding-top, Padding-right, Padding-bottom, Padding-left, and padding.

Border: The area of the bounding box that exists between the padding and the margin. The width of the border in the default layout is set to 0, so that the border of the element is not displayed.

margin: Margin area, which controls the distance of other elements from the current element. The properties that can be used with CSS are margin-top, Margin-right, Margin-bottom, Margin-left, and margin.

1.2.1 Example

Description: style width and true occupy width, not the same content .

2. Box model

Description of the difference between the standard box model and the IE box model:

• The CSS box model specifies the attributes: content, padding (padding), Border (border), margin (margin)
• In the standard box model of CSS,width and height refer to the widths and heights of the content area . Increasing the padding, borders, and margins does not affect the size of the content area, but increases the total size of the element box. In the IE box model , Width and height are the widths and heights of thecontent area + border (left and right or up and down) + inner margin (left or right or up and down) .

2.1 Standard Box model

2.2 IE Box model

2.3 Box description "standard box model"

Content:width, height

Examples of boxes (true occupancy width: 302*302):

. box1{        width:100px;        height:100px;        padding:100px;        border:1px solid red;   } /* box real Occupy width = left border + Left padding + width + right padding + right border  box true occupy height = upper Border + Upper padding + height + lower padding + lower Bo Rder* *. box2{        width:250px;        height:250px;        padding:25px;        border:1px solid red;    }

Box Model:

Summarize:

If you want to keep a box of the true possession of the high-wide unchanged, then add width/height, it is necessary to reduce the corresponding padding. When adding padding, the corresponding width/height should be reduced. because the box becomes fat is disastrous, it will squeeze the other boxes down .

3. Width and height of elements

By default, the width, height property in CSS refers to the width and height of the content area.

In the DOM, the Get element aspect has the following properties: Clientwidth/clientheight, Offsetwidth/offsetheight, Scrollwidth/scrollheight.

3.1 ClientWidth, ClientHeight

Description: the width and height of the visible area of the object content, including the padding, the width of the content area, the height, and not the edges of the scroll bar.

Formula:

Element.clientwidth = padding-left + width + padding-= padding-top + height + padding-bottom

Example:

3.2 offsetwidth, offsetheight

Description: The actual width and height of the whole object, including the width and height of the bounding rectangle, padding, content area and scroll bar.

Formula:

Element.offsetwidth = border-left + padding-left + width + padding-right + border-= border-top + padding-top + He ight + Padding-bottom + border-bottom

Example:

3.3 ScrollWidth, ScrollHeight

description : Similar to ClientWidth, clientheight (including padding, content area, but not scroll bar), ScrollWidth, scrollheight are closely related to the overflow style properties of the element:

When the content of a block-level element exceeds the size of an element, its contents are scrolled or overflowed according to the value set by overflow, and scrollwidth, scrollheight contain these invisible content areas.

Example:

4. box-sizing

By default, the values of the width and Height properties in the CSS are applied only to the content area of the element, and the Box-sizing property modifies this default scope.

The box-sizing values are content-box(default) and Border-box.

4.1 Box-sizing:content-box

Description : Values that represent the width and Height properties in the CSS are applied only to the content area of the element.

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

4.2 Box-sizing:border-box

Description : The range that represents the border and padding of an element is contained within the width, height, of the CSS.

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

5. Width of elements in jquery (height)

jquery provides the following ways to get the width of an element:

$ (Element). Width (): Gets the breadth of the content area of the element. If the element contains Box-sizing:border-box , the corresponding padding and boder will be subtracted.

$ (Element). Innerwidth (): Gets the width of the content area + padding of the element.

$ (Element). Outerwidth (): Gets the width of the element content area + padding + boder.

$ (Element). Outerwidth (True): Gets the width of the element content area + padding + boder + margin.

Example Diagram :

CSS Box Model Box models