CSS Box Model Box models

1. Introduction1.1 What is the Box Model

Each element (element) in HTML can be viewed as a rectangular box, which consists of the contents of the element (content), the padding (padding), the border (border), the margin (margin), in turn, from inside to outside.

In the layout of CSS, the rectangle of the element is called the "box model", which is the box. When the browser renders the page, the box model determines the size and position of the element.

1.2 Composition Structure

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

content: The area 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. Controls the margin 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.

2. 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.

2.1 clientwidth, clientheight

Description : Contains the padding, the width of the content area, the height, and if the scrollbar is included, the width and height of the scrollbar will be subtracted.

Formula :

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

Example :

2.2 offsetwidth, offsetheight

Description : Contains the width and height of a range, such as a border, padding, content area, and scroll bar.

Formula :

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

Example :

2.3 scrollwidth, scrollheight

description : Similar to ClientWidth, clientheight (including padding, content area, but not scroll bar), except ScrollWidth, ScrollHeight is closely related to the overflow style attributes of an 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 :

3. 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.

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

3.1 Box-sizing:content-box (default value)

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.

3.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.

Example :

width of element in 4.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 :

5. Extended reading

W3 css3-box:https://www.w3.org/tr/css3-box/

MDN Box-model:https://developer.mozilla.org/zh-cn/docs/learn/css/introduction_to_css/box_model

MDN box-sizing:https://developer.mozilla.org/zh-cn/docs/web/css/box-sizing

Original URL: http://www.cnblogs.com/polk6/p/css-boxModel.html

CSS Box Model Box models