box model and Width calculation of box model in CSS

CSS assumes that all HTML document elements produce a rectangular element that describes the space occupied by the element in the HTML document layout ( Element box), which can be visualized as a box. CSS creates a "box model" concept around these boxes .

box model, in effect, is to see some of the label elements as a box. The distance between the box and the other box is the outermost of the box, which is not an edge but a space that is added outside the border. This margin makes it unnecessary for the element boxes to be tightly connected,CSSan important means of layout. With margin (outer margin)property to represent theMargin-top,Margin-right,Margin-bottom,Margin-leftcan be understood asThe box is a distance from the four directions outside the box. The box's own border thickness, just use borderproperty to represent,you can usually set its color, width, dashed line, etc. the object in the box iscontent,itself has a width(weight), Height(height), the object and the box will have a certain distance, this distance ispadding (Inner EdgeFrom, there arePadding-top,padding-left,padding-right,padding-bottom.This is my simple understanding of the box model.

In the debugging, according to the color is very good to see how many of these parts, exactly where is the location? Using Google debugging Example: the orange * * * * * * * is the element set by the margin attribute value; This graph is:margin:20px auto; The result:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/7C/6E/wKioL1bQO7jAp0Y0AAAkngsiO0A315.jpg "title=" 1.jpg " alt= "Wkiol1bqo7jap0y0aaakngsio0a315.jpg"/>

is the Border property value set by this element.

650) this.width=650; "src=" http://s1.51cto.com/wyfs02/M01/7C/6F/wKiom1bQO1ahAj2YAAAlnHhc_PQ881.jpg "title=" 2.jpg " alt= "Wkiom1bqo1ahaj2yaaalnhhc_pq881.jpg"/>

The green part of the lotus leaf is the padding value of this element, up and down 15px, about 25px

650) this.width=650; "src=" http://s2.51cto.com/wyfs02/M01/7C/6E/wKioL1bQO9vjMnyiAAAhjYrkh2s919.jpg "title=" 3.jpg " alt= "Wkiol1bqo9vjmnyiaaahjyrkh2s919.jpg"/>

The blue representation is the height of the object itself. weight:300px; height:300px;

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/7C/6F/wKiom1bQO3eBrjSUAAAiAwbKeOc774.jpg "title=" 4.jpg " alt= "Wkiom1bqo3ebrjsuaaaiawbkeoc774.jpg"/>

The width of the corresponding box model is equal to margin-left+margin-right+border-left+border-right+padding-left+padding-right+width; The height is also corresponding to the internal and external margins and border.

The box-sizing attribute is presented in the new CSS3 . When you use the box-sizing property value, you can better and more easily select whether to specify the width value, the Height property, and the height value of the element, and the width of the inner and outer margins of the elements, and the widths of the borders, respectively. In general, the box-sizing attribute value is used to control the total width height of the element.

This property contains:

Content-box,Border-box;

default is Content-box , the width and height are applied to the element's content box, respectively. draws the inner margin and border of the element outside the width and height. Box model width, Height calculation method and the same as above,

However , when set to border-box , the width and height of the element set determines the bounding box of the element. the inner and outer margins of this box do not increase its width. that is, any padding and borders specified for the element will be drawn within the set width and height.

box model and Width calculation of box model in CSS