Back-end programmer front-end Road 04--box model detailed

Directory

• Graphic
• Box Model Size Reference
• Use the browser's developer tools to view the element's high (wide) degree, problems encountered

First, the diagram

Description: Content, padding (inner margin), border (border), margin (margin) are in order from the inside out.

For example: a courier car with a lot of courier packages (box packaging), each package and put a different thing.

Content: An area that truly accommodates other things. For example, the content of the express car, is the parcel of the space where;

and the content of each package is the space in which those things are located.

content can be placed in other elements, text, pictures and so on .

Border: The border of the box. For example, the tin of the express car, the box that wraps the outer layer.

You can specify the color, thickness (width), style, and so on for the border.

The distance between the padding:content and the border.

Margin: The distance between the parcel and the parcel. This distance can be negative, because it can be superimposed on each other.

Note: Because each browser will initialize a different value for the margin, padding value of the element.

so each time you write a style, you need to initialize the elements involved in the page .

/**/body,div,span{    margin:0px;     Padding:0px;}

Second, box model size reference

By default, setting the width and height of an element is actually set to the widths and heights of the content.

Q: What is the actual width and the actual height of this element?

A: Actual width = left margin + left Border + Left padding + content + right padding + right border + friends margin; the actual height is the same.

Q: So the question is, what if I want to set the actual height of an element directly?

A:CSS3 added a new attribute box-sizing is used to solve this problem. It has three values: Content-box, Border-box, inherit.

Content-box: Is the usual default, which refers to the height and width of the content.

Border-box: The literal meaning is not difficult to see, refers to border within (including border) height, width.

Inherit: Inherits the value of the Box-sizing property from the parent element.

Third, use the browser developer tools, to see the element high (wide), the problem encountered

when using Google Chrome to review element functionality, it will function to indicate the height and width of the current element.      However, the actual height and width of the calculated elements are inconsistent with the information indicated.

<style>Div{width:200px;padding:20px;Border:1px solid Red;margin:10px;                   }</style><Div>Text content</Div>

By calculation, the actual width of the div = ten + 1 + + + + + + 1 + = 262px;

And the developer tool shows the result is 242px, the difference 20px;

By adjusting the different parameters, we conclude that the results calculated by the review elements are not including margin values.

Back-end programmer front-end Road 04--box model detailed